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

我遇到了一个独特的事件，当用户从下拉列表中进行选择时，如果你在画布上扫描，图形会发生变化，那么前面的内容会像幽灵一样出现在背景中。我知道你可以使用像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();

---

这说明了问题所在，将鼠标悬停在图表上以查看“重影”。

因为您没有销毁不再使用的

图表的实例，chartjs正在将多个图表绘制到同一画布上下文中

您需要有一个
图表
实例的引用，您可以在
新建
之前调用
销毁

将此添加到您的代码中：

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();

下面是一个演示修复方法的示例
 你能制作一把小提琴来演示这个问题吗？太棒了，附上gif来展示你的答案是完美的！不过，我有一个问题。我现在有数据通过发布/订阅模型上的Websocket发送，因此它每隔几秒钟自动更新具有相同图表类型的图表，并且我在“Ghost”@user2402107中遇到了相同的问题。即使您每隔几秒钟更新图表，这也应该有效。在创建新图表之前，请记住销毁图表。这说明即使数据每隔一两秒就被更改一次，它也能正常工作。