ChartJs 鼠標懸停錯誤（顯示以前的圖表）

Question

我認為我的問題是一個已知的問題，每次我制作新圖表並將鼠標懸停在畫布上的某些點上時，舊圖表都會一直閃爍。 這是我嘗試修復它的線程之一<\/a>，但似乎沒有任何效果。 我嘗試重新附加畫布，使用銷毀，清除，如果應該<\/em>清除它的語句，但沒有。

這是我的代碼：

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

Answer 1

我也有這個問題。 要解決它，您首先必須全局聲明myChart變量，然后嘗試這種方式。

//var my chart declare globally.  
let chartData = {
        type: 'line',
        data: {
            labels: chartjsDate,
            datasets: [{
                label: 'temp',
                data: chartjsTemp,
                backgroundColor: "rgba(240,240,240,0.5)"
            }]
        }
        if (typeof(this.myChart) != "undefined") {
            this.myChart.destroy();
        }

        const ctx = this.renderRoot.querySelector('#chart-canvas').getContext('2d');
        this.myChart = new Chart(ctx, chartData);
        this.myChart.update();

Answer 2

解決了！ 我在 javascript 代碼上方添加了這個：

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

並將我的提交按鈕更改為具有 id“submitButton”，如下所示：

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

這樣，每次按下提交按鈕時，它都會破壞之前的圖表。 奇怪的是，當嘗試使用myChart.destroy(); 我有錯誤。

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

  var ctxLine = document.getElementById("line-chart").getContext("2d");


 //var myLineChart;
 //myLineChart;
 if(window.bar != undefined)
    window.bar.destroy();
 window.bar = new Chart(ctxLine, {});
 

為了更清楚地檢查這個： solved-hovering-chartjs-bar-chart-showing-old-data

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

Answer 6

我通常在創建圖表之前這樣做

document.querySelector(".chart-container").innerHTML= '<canvas id="bar_chart"></canvas>';
var chart3 = $('#bar_chart');

graph = new Chart(chart3, {
type: 'bar',
data: chart_data,
options: options
});

我的html：

<div class="chart-container">
  <canvas id="bar_chart"></canvas>0
</div>

Answer 7

只需使用它即可解決您的問題；

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