Javascript 图表JS动态图表

我正在使用

Chart.js

构建一个动态图表（同一画布元素根据下拉列表的值显示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
    });
}

我对.clear（）和.destroy（）也有类似的问题

对我有用的是：

完全拆下并更换
元件

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

试试这个：

在绑定数据之前，请删除画布；）

HTML:



脚本：

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

$（'#DivChartContainer'）.empty（）；
$（'#DivChartContainer'）。附加（''）；
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
var myLineChart=新图表（ctx）.Bar（barChartData{
回答：是的，
barValueSpacing:10，
barStrokeWidth:0，
scaleShowLabels：对，
scaleShowGridLines：对，
scaleGridLineColor:“rgba（0,0,0,05）”，
scaleGridLineWidth:1，
});

问题解决了
 我遇到了同样的问题，我尝试使用.clear（），.destroy（），.remove（），但这些都不起作用。最后，我选择使用谷歌图表。我也没有找到解决方案，但当我在点上禁用悬停效果时，“闪烁”问题停止了。我也一直在考虑切换到谷歌图表。试试我的解决方案，希望它可能会有帮助，它的工作方法是我所缺少的，使用窗口来保持图表的活力。使用var意味着它在函数调用之后消失。谢谢。虽然一旦你用window.myDoughnut=new Chart创建了图表。。。。您不需要使用窗口。要引用它，只需使用myDoughnut.destroy（）即可。destroy（）的原因是您的图表存储为变量。请尝试window.myLineChart=new chart（ctx）.Bar，您会发现它是有效的。多亏了下面的另一条评论，我才算出来。@Suganth G我想在图表中设置y ex上的所有日期，所以你能帮我怎么做吗。
        $('#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,
        });