Question

我正在使用Chart.js来构建动态图表（相同的canvas元素显示30天，7天和1天的数据，具体取决于下拉值。

我有代码工作，重绘画布。新数据出现在下拉更改中，但是当我将鼠标悬停在图表上时，数据会闪烁，我可以看到图表的先前版本。我知道我需要使用.clear()函数来清除数据，但我不确定这应该发生在哪里。在函数执行之前的var ctx上？或者 window.myLine？

function redrawChart(data){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(data, {
        responsive: true
    });
}

Answer 1

试试这个：

在绑定数据之前，也要删除画布;）

HTML：

<div id="DivChartContainer"></div>

SCRIPT：

        $('#DivChartContainer').empty();
        $('#DivChartContainer').append('<canvas id="canvas"></canvas>');
        var ctx = document.getElementById("canvas").getContext("2d");
        var myLineChart = new Chart(ctx).Bar(barChartData, {
            responsive: true,
            barValueSpacing: 10,
            barStrokeWidth: 0,
            scaleShowLabels: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
        });

问题解决了!!

Answer 2

destroy（）对我来说很好，请查看此代码。

 if (window.myDoughnut)
     window.myDoughnut.destroy();

 var ctx = $elm.getContext("2d");
 window.myDoughnut = new Chart(ctx).DoughnutAlt(value, {showScale: true, scaleShowLabels: true, animation: false});

Answer 3

我在.clear（）和.destroy（）

方面遇到了类似的问题

对我有用的是什么：

完全删除并替换<canvas>元素

图表JS动态图表

3 个答案: