Morris js 图表加载两次

Question

我正在使用 Morris js 绘制基本折线图。这是我的代码：

function getChart(range) {
    $.ajax({
        type: 'GET',
        url: "page.php?doChart=1&range=" + range,
        dataType: 'json'
    }).done(function(json) {
        Morris.Line({
            element: 'chart',
            data: json.data,
            xkey: 'month',
            ykeys: json.xkey,
            labels: json.label,
            parseTime: false
        });
    });
}
$(document).ready(function() {
    getChart('all');
    $("#timeRange").on('click', function() {
        getChart($(this).data('value'))
    });
});

上面的代码在页面加载时工作正常，问题是当我尝试加载不同时期的图表时，使用点击事件。原始容器 ID #chart 正在被替换，但由于某种原因，在 #chart div.

下面创建了相同的图表实例

Answer 1

这样试试：

function getChart(range) {
  $("#chart").empty();
  $.ajax({
... etc

每次您运行 Morris.Line 函数时，它都会将一个 <svg> 元素插入到您选择的元素中（在您的例子中是 "chart"）。它不会覆盖前一个，它会添加一个额外的。所以你需要先清除旧图表。

查看此演示以演示重复问题： http://jsbin.com/yelonizoce/1/edit?html,js,output

而这一个是为了演示 .empty(); 的用法 http://jsbin.com/xinegovoqo/1/edit?html,js,output

Morris js 图表加载两次

Morris js chart loads twice

jquery

morris.js