ChartJs画布在更改图形类型时显示上一个图形

Question

我遇到了一个独特的事件,当用户从下拉菜单中选择并且如果您在画布上扫描图形会发生变化,之前的事件将在背景中显示为鬼影.我知道你可以使用像graph.destroy()这样的东西,但我不确定这是否合适以及放在哪里.

我更新图表的代码

var ctx = document.getElementById("myChart").getContext("2d");
    ctx.canvas.width = 600;
    ctx.canvas.height = 200;

    function updateChart() {
        //  ctx.canvas.destroy();
        var determineChart = $("#chartType").val();

        var params = dataMapMain[determineChart];
        if ([params.method] == "Pie") {
            document.getElementById("subOption").hidden = false;
            document.getElementById("arrowId").hidden = false;

    var determineChart = $("#subOption").val();
            var params = dataMapSub[determineChart];
            $('#subOption').on('change', updateChart);

            new Chart(ctx)[params.method](params.data, options, {});

        }
        else {
            document.getElementById("subOption").hidden = true;
            document.getElementById("arrowId").hidden = true;
            new Chart(ctx)[params.method](params.data, options, {});
        }
    }

    $('#chartType').on('change', updateChart)
    updateChart();

这个小提琴演示了这个问题,将鼠标悬停在图表上以查看" 幽灵 ".

Answer 1

因为您不会破坏Chart不再使用的实例，所以 chartjs 将多个图表绘制到同一个画布上下文中。

你需要有一个Chart你new建立的实例的引用，destroy以便在你new建立另一个实例之前能够调用它们。

将此添加到您的代码中：

var ctx = document.getElementById("myChart").getContext("2d");
    ctx.canvas.width = 600;
    ctx.canvas.height = 200;

var chart; // assign your chart reference to this variable

function updateChart() {
    var determineChart = $("#chartType").val();

    var params = dataMapMain[determineChart];
    if ([params.method] == "Pie") {
        document.getElementById("subOption").hidden = false;
        document.getElementById("arrowId").hidden = false;

var determineChart = $("#subOption").val();
        var params = dataMapSub[determineChart];
        $('#subOption').on('change', updateChart);

        chart && chart.destroy(); // destroy previous chart
        chart = new Chart(ctx)[params.method](params.data, options, {});

    }
    else {
        document.getElementById("subOption").hidden = true;
        document.getElementById("arrowId").hidden = true;

        chart && chart.destroy(); // destroy previous chart
        chart = new Chart(ctx)[params.method](params.data, options, {});
    }
}

$('#chartType').on('change', updateChart)
updateChart();

这是一个演示修复程序的小提琴。