Question

我认为我的问题是一个众所周知的问题，每次我创建一个新图表并将鼠标悬停在画布上的某些点上时，旧图表会一直闪烁。 Here's one of the threads我接着尝试修复它，但似乎没有任何效果。我尝试重新附加画布，使用destroy，clear，if语句应清除它，但什么也没有。

这是我的代码：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: chartjsDate,
        datasets: [{
            label: 'temp',
            data: chartjsTemp,
            backgroundColor: "rgba(240,240,240,0.5)"
        }]
    }
});

我尝试在该代码之前和之后添加myChart.destroy();，甚至if(myChart!=null){myChart.destroy();}，但仍然没有。任何有关如何解决它的帮助将不胜感激。我发现的所有其他主题都很老，他们的解决方案也不起作用。

编辑：我试过的一些东西，无济于事：

var myChart;
if (myChart != undefined || myChart !=null) {
    myChart.destroy();
}

Answer 1

解决！我在javascript代码上面添加了这个：

var button = document.getElementById("submitButton");
submitButton.addEventListener("click", function(){
    myChart.destroy();
});

并更改了我的提交按钮以获得ID＆＃34; submitButton＆＃34;，就像这样：

<input type="submit" class="btn btn-danger" id="submitButton" value="Send" />

这样，每次按下提交按钮，都会破坏上一个图表。奇怪的是，当我尝试使用myChart.destroy();时，我遇到了错误。

Answer 2

df.select(df["value"].getItem(0).alias("value1"), 
        df["value"].getItem(1).alias("value2"), 
        df["value"].getItem(2).alias("value3"))

更清楚地检查一下： solved-hovering-chartjs-bar-chart-showing-old-data

Answer 3

以上解决方案对我有用，但是当我在同一页面上有两个图表时，仅显示一个。其他图表正在变空。这是解决方案。

  var ctx = document.getElementById("bar-chart").getContext("2d");  

  //Destroy the previous chart;
  //Rename the "bar" according to your component
  if(window.bar != undefined)
  window.bar.destroy();
  window.bar = new Chart(ctx , {});

如果您不更改“条形图”，则页面中只会显示一个图表。

Answer 4

只需使用它即可解决您的问题；

if(window.myChart!=undefined) {
    var oldcanvasid= window.myChart.chart.ctx.canvas.id;
    if(chardcanvasid==oldcanvasid) {
             window.myChart.destroy();
    }
}
var ctx = document.getElementById(chardcanvasid).getContext('2d');
window.myChart = new Chart(ctx, {
   type: charttype,
   data: datass,
   options: optionss,
});

Answer 5

这不是错误。基本上，您每次都创建一个新图。您需要的是更新图形，而不是在该画布上绘制一个新图形。可以使用以下代码完成此操作。

 if(typeof Graph ==="undefined"){
       window.Graph = new Chart(Graph_ctx, Graph_config);
 }else{
       //updating with new chart data
       window.Graph.config=Graph_config;
       //redraw the chart
       window.Graph.update();
 }

ChartJs鼠标悬停bug（显示以前的图表）

5 个答案: