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'))
    });
});

上面的代码在页面加载时效果很好，问题是当我尝试使用click事件加载不同时期的图表时。原始容器ID #chart正在被替换，但由于某种原因，在#chart div下面创建了相同的图表实例。

Answer 1

试试这样：

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

每次运行Morris.Line函数时，它都会在您选择的元素中插入<svg>元素（＆＃34;图表＆＃34;在您的情况下）。它没有覆盖前一个，它增加了一个额外的。所以你需要先清除旧图表。

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

这一个用于演示.empty();的使用 http://jsbin.com/xinegovoqo/1/edit?html,js,output

莫里斯js图表加载两次

1 个答案: