Chartjs條形圖顯示懸停時的舊數據

我有一個使用chart.js創建的條形圖。一切工作正常頁面加載，但當我改變使用daterangepicker的時間框架，出現一個小故障。新數據被引入，但是當我將鼠標懸停在上面時，會顯示舊數據。我是新來的JavaScript，所以我希望得到一些幫助。它看起來像我需要納入.destroy（）;不知何故，但我不知道如何。我的代碼片段低於：Chartjs條形圖顯示懸停時的舊數據

function loadFTPRChart(startdate, enddate){ 
var BCData = { 
labels: [], 
datasets: [ 
{ 
    label: "Pass %", 
    backgroundColor: "#536A7F", 
    data: [], 
    stack: 1 
}, 
{ 
    label: "Fail %", 
    backgroundColor: "#e6e6e6", 
    data: [], 
    stack: 1 
}, 
{ 
    label: "Auto %", 
    backgroundColor: "#286090", 
    data: [], 
    stack: 2 
}, 
{ 
    label: "Manual %", 
    backgroundColor: "#f0f0f0", 
    data: [], 
    stack: 2 
} 
] 
}; 
    $.getJSON("content/FTPR_AM_Graph_ajax.php", { 
    startdate: startdate, 
    enddate: enddate, 
    location: "M" 
}) 
.done(function(data) { 
    console.log("data", data); 
    $.each(data.aaData, function(key, val) { 
     if(val == ""){return true} 
     BCData.labels.push("Coater " + val[0]); 
     BCData.datasets[0].data.push(parseFloat(val[2])); 
     BCData.datasets[1].data.push(parseFloat(100-val[2])); 
     BCData.datasets[2].data.push(parseFloat(val[1])); 
     BCData.datasets[3].data.push(parseFloat(100-val[1])); 
    }); 

    var option = { 
    responsive:true, 
}; 
console.log("BCData", BCData); 


//console.log("PrevData", data); 
var ctx = document.getElementById("mybarChart2").getContext("2d"); 
new Chart(ctx, { 
    type: 'groupableBar', 
    data: BCData, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks: { 
      max: 100, 
     }, 
     stacked: true, 
     }] 
    } 
    } 
}); 
}); 

} 


loadFTPRChart($('#reportrange').data().daterangepicker.startDate.format('MM/DD/YYYY'), $('#reportrange').data().daterangepicker.endDate.format('MM/DD/YYYY'));

什麼是破壞原始數據，這樣，當我更改日期範圍，將鼠標懸停在新的圖表，舊的數據不再閃爍的最好方法？

由於

來源

2017-03-14 Djones12

隨着你正在服用（例如，每次的時間範圍變動創建一個新的表對象），則必須首先破壞以前的圖表，然後創建新的一個的辦法。

您可以使用.destroy()原型方法來執行此操作。這正是API所說的。

使用此選項銷燬所有創建的圖表實例。這將清除存儲到Chart.js中的圖表對象的所有引用，以及由Chart.js附加的任何關聯的事件偵聽器。必須在畫布重新用於新圖表之前調用此。

因此，你的代碼看起來像這樣（注意我們銷燬並重新創建）。

// define a variable to store the chart instance (this must be outside of your function) 
var myChart; 

function loadFTPRChart(startdate, enddate) { 
    var BCData = { 
    labels: [], 
    datasets: [{ 
     label: "Pass %", 
     backgroundColor: "#536A7F", 
     data: [], 
     stack: 1 
    }, { 
     label: "Fail %", 
     backgroundColor: "#e6e6e6", 
     data: [], 
     stack: 1 
    }, { 
     label: "Auto %", 
     backgroundColor: "#286090", 
     data: [], 
     stack: 2 
    }, { 
     label: "Manual %", 
     backgroundColor: "#f0f0f0", 
     data: [], 
     stack: 2 
    }] 
    }; 

    $.getJSON("content/FTPR_AM_Graph_ajax.php", { 
     startdate: startdate, 
     enddate: enddate, 
     location: "M" 
    }) 
    .done(function(data) { 
     console.log("data", data); 
     $.each(data.aaData, function(key, val) { 
     if (val == "") { 
      return true 
     } 
     BCData.labels.push("Coater " + val[0]); 
     BCData.datasets[0].data.push(parseFloat(val[2])); 
     BCData.datasets[1].data.push(parseFloat(100 - val[2])); 
     BCData.datasets[2].data.push(parseFloat(val[1])); 
     BCData.datasets[3].data.push(parseFloat(100 - val[1])); 
     }); 

     var option = { 
     responsive: true, 
     }; 
     console.log("BCData", BCData); 

     // if the chart is not undefined (e.g. it has been created) 
     // then destory the old one so we can create a new one later 
     if (myChart) { 
     myChart.destroy(); 
     } 

     var ctx = document.getElementById("mybarChart2").getContext("2d"); 
     myChart = new Chart(ctx, { 
     type: 'groupableBar', 
     data: BCData, 
     options: { 
      scales: { 
      yAxes: [{ 
       ticks: { 
       max: 100, 
       }, 
       stacked: true, 
      }] 
      } 
     } 
     }); 
    }); 
}

這樣說，它的代價很高，一次又一次地破壞/創建，實際上甚至沒有必要。還有另一種名爲.update()的原型方法，如果您已更改底層數據或標籤對象，則可以使用該方法重新呈現圖表。

這是一個jsfiddle，顯示更改底層數據和標籤然後重新繪製圖表的示例。我強烈建議你採取這種方法。

下面是你的代碼如何看待這個更好的方法。

// define a variable to store the chart instance (this must be outside of your function) 
var myChart; 

function loadFTPRChart(startdate, enddate) { 
    var BCData = { 
    labels: [], 
    datasets: [{ 
     label: "Pass %", 
     backgroundColor: "#536A7F", 
     data: [], 
     stack: 1 
    }, { 
     label: "Fail %", 
     backgroundColor: "#e6e6e6", 
     data: [], 
     stack: 1 
    }, { 
     label: "Auto %", 
     backgroundColor: "#286090", 
     data: [], 
     stack: 2 
    }, { 
     label: "Manual %", 
     backgroundColor: "#f0f0f0", 
     data: [], 
     stack: 2 
    }] 
    }; 

    $.getJSON("content/FTPR_AM_Graph_ajax.php", { 
     startdate: startdate, 
     enddate: enddate, 
     location: "M" 
    }) 
    .done(function(data) { 
     console.log("data", data); 
     $.each(data.aaData, function(key, val) { 
     if (val == "") { 
      return true 
     } 
     BCData.labels.push("Coater " + val[0]); 
     BCData.datasets[0].data.push(parseFloat(val[2])); 
     BCData.datasets[1].data.push(parseFloat(100 - val[2])); 
     BCData.datasets[2].data.push(parseFloat(val[1])); 
     BCData.datasets[3].data.push(parseFloat(100 - val[1])); 
     }); 

     var option = { 
     responsive: true, 
     }; 
     console.log("BCData", BCData); 

     // if the chart is not undefined (e.g. it has been created) 
     // then just update the underlying labels and data for each 
     // dataset and re-render the chart 
     if (myChart) { 
     myChart.data.labels = BCData.labels; 
     myChart.data.datasets[0].data = BCData.datasets[0].data; 
     myChart.data.datasets[1].data = BCData.datasets[1].data; 
     myChart.data.datasets[2].data = BCData.datasets[2].data; 
     myChart.data.datasets[3].data = BCData.datasets[3].data; 
     myChart.update(); 
     } else { 
     // otherwise, this is the first time we are loading so create the chart 
     var ctx = document.getElementById("mybarChart2").getContext("2d"); 
     myChart = new Chart(ctx, { 
      type: 'groupableBar', 
      data: BCData, 
      options: { 
      scales: { 
       yAxes: [{ 
       ticks: { 
        max: 100, 
       }, 
       stacked: true, 
       }] 
      } 
      } 
     }); 
     } 
    }); 
}

來源

2017-03-14 15:21:11 jordanwillis

對不起，我知道我應該知道如何實施你的建議，但是你認爲你可以給我多一點想法什麼/如何做到這一點？位：HTML： – Djones12

當然，它非常簡單。我用兩種方法的例子更新了我的答案。既然你沒有提供一個工作jsfiddle（或類似的東西），我當然不能測試這個，但你應該能夠用這些例子運行。 – jordanwillis

非常感謝！你提供的第二個選項是可行的。這有點慢，我會試圖找出爲什麼/加速它的方法。如果您有任何建議，我全都聽過。但就目前而言，我真的很感謝幫助，並將其標記爲正確的答案。 – Djones12

我被發現的問題，我的解決方案是先從html中刪除它們，然後再加載新圖表，然後追加畫布。

的Html

$('#chart').empty(); 
 
    
 
$('#chart').html('<canvas id="survey_result" width="400" height="200"></canvas>'); // then load chart. 
 
    
 
var ctx = document.getElementById("survey_result");

<div id="chart" class="display> 
 
    </div>

來源

2017-10-30 06:32:20

有這個一個簡單的解決方案，它可以在JS本身來完成。

假設你的HTML有類似下面

<div id="chartContainer"> 
<canvas id="mybarChart2"></canvas> 
</div>

然後在你的腳本，你可以在下面的代碼行更新數據前添加。

document.getElementById("chartContainer").innerHTML = '&nbsp;'; 
document.getElementById("chartContainer").innerHTML = '<canvas id="mybarChart2"></canvas>'; 
var ctx = document.getElementById("mybarChart2").getContext("2d");

這解決了我的問題。

來源

2018-01-29 19:01:50 Rajeshwar

Chartjs條形圖顯示懸停時的舊數據

回答

相關問題