AJAX 调用后重绘莫里斯甜甜圈答案

【问题标题】：Redraw Morris Donut after AJAX callAJAX 调用后重绘莫里斯甜甜圈
【发布时间】：2016-07-27 18:04:43
【问题描述】：

我正在使用 Morris Donut 作为我正在处理的仪表板，并使用两个日期范围作为参数通过 AJAX 检索数据。我面临的问题是当我输入两个新的日期范围时，甜甜圈图会在页面加载时已经创建的甜甜圈之上呈现一个新的日期范围。我已经搜索并可以看到有关使用 setData() 的信息，但我不知道如何将其包含在我的代码中。

我的代码：

$(document).ready(function () {
        var start = $('#SearchStart').val();
        var end = $('#SearchEnd').val();
        populateDonut(start, end); 
});

点击搜索按钮时会执行以下操作：

$('#DateRange').click(function() {
        var start = $('#SearchStart').val();
        var end = $('#SearchEnd').val();
        populateDonut(start, end);
});

这是被调用的函数。

function populateDonut(start, end) {
var param = { start: start, end: end };
$.ajax({
    type: "POST",
    url: "/WebService.asmx/getDonutData",
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    async: true,
    data: JSON.stringify(param),
    success: function (result) {
        var data = eval("(" + result.d + ")");
        var pieChart = '';
        if (data.status == 0) {
            var donut = Morris.Donut({
                element: 'pieChart',
                data: [
                    { label: "Inbound", value: data.inbound },
                    { label: "Outbound", value: data.outbound },
                    { label: "Unanswered", value: data.unanswered }
                ],
                colors: ['#1ca8dd', '#33b86c', '#ebc142'],
                resize: true,
                formatter: function (x) { return x + "%" }
            });
        }   
    }
  });
}

输入新日期范围后的屏幕截图：

【问题讨论】：

标签： javascript jquery ajax morris.js

【解决方案1】：

在渲染第二个图表之前尝试调用$("#pieChart").empty();。

最好在这里：

$('#DateRange').click(function() {
    var start = $('#SearchStart').val();
    var end = $('#SearchEnd').val();
    // Clear the existing chart before populating new donut
    $("#pieChart").empty();
    populateDonut(start, end);
});

【讨论】：

感谢@Adriennetack 的快速响应！效果很好！
没问题！如果您不介意将此标记为已回答，那就太好了。很高兴我能帮上忙！

【解决方案2】：

我尝试了下面的代码，它对我有用：

$("#chart-id").empty();

您可以在每次调用图表数据时使用它。

【讨论】：