javascript - Chart JS动态图表

Question

我正在使用 Chart.js 构建动态图表(同一 Canvas 元素根据下拉列表的值显示 30 天、7 天和 1 天的数据。

我的代码可以重新绘制 Canvas 。新数据出现在下拉更改中，但是当我将鼠标悬停在图表上时，数据会闪烁，我可以看到图表的先前版本。我知道我需要使用 .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

试试这个:

在绑定(bind)数据之前，也删除 Canvas ;)

HTML:

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

脚本:

        $('#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,
        });

问题已解决!!