重新初始化Morris gragh时，防止滚动到顶部

Question

我有一张莫里斯图here。

点击img / span后，我必须重新填充/初始化新数据。

这些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