重新初始化莫里斯图时防止滚动到顶部

Question

我有一个 Morris 图 here。

点击 img/span 后，我必须 re-populate/initialize 使用新数据。

这些span/img

<span class="a" onclick="changeGraph('all', this)"><img src="http://umairayub.ezyro.com/fetchPG_files/hour.png"> All</span>
<span class="a" onclick="changeGraph('hour', this)"><img src="http://umairayub.ezyro.com/fetchPG_files/hour.png"> Hours</span>
<span class="a b" onclick="changeGraph('weeks', this)"><img src="http://umairayub.ezyro.com/fetchPG_files/hour.png"> Weeks</span>

这是JS代码。

function changeGraph(type, obj) {
 // some calculation here.
 createPGhistoryGraph(finalArray) 
}

function createPGhistoryGraph(pg_data) {
    $("#pg_scrape_history").html('');
    if (typeof Morris !== "undefined" && $("#pg_history_data").html() != '[]') {
        var x = new Morris.Area({
            element: 'pg_scrape_history',
            resize: true,
            data: pg_data,
            xkey: 'date',
            ykeys: ['price'],
            labels: ['Price'],
            lineColors: ['#a0d0e0', '#3c8dbc'],
            hideHover: 'auto',
            hoverCallback: function (index, options, content, row) {
                return "<div class='morris-hover-row-label'>" + row.date + "</div><div class='morris-hover-point' style='color: #a0d0e0'><a href='" + row.link + "' target='_blank'>Price:" + row.price + "</a></div>";
            }
        });
    }
}

可以看到var x = new Morris.Area({是初始化图的部分

问题是当我点击其中一个按钮时整个页面向上滚动，

我不知道如何使用简单的 JS 或在 Morris 插件的源代码级别防止这种向上滚动。请帮忙！

Answer 1

为什么每次收到新数据时都要删除并重新创建图表？

您可以这样做，更新图表而无需删除 DOM 元素：

var chart = Morris.Area({ ... });

var asyncCallback = function(newData) {
  chart.setData(newData); // this will redraw the chart
};

Source: http://morrisjs.github.io/

Example using the setData api

重新初始化莫里斯图时防止滚动到顶部

Prevent scrolling to top when re-initializing Morris gragh

html

javascript

css

jquery

morris.js