javascript - 如何通过鼠标悬停和多次更新来解决 Chart.js 2.0 问题？

Question

很奇怪，我有一个 Chart.js 图表，我需要动态更新。更新工作正常，但如果将鼠标移到图表上或单击几次更新按钮(添加数据)，条形图和线条就会消失，并在控制台中显示以下错误:

Uncaught TypeError: Cannot read property 'draw' of null

请点击按钮几次，您可以缓慢或快速地测试。单击“添加数据”按钮后，将鼠标移到图表上。

您可以在以下地址进行测试:https://jsfiddle.net/s9zraysh/

如何避免此错误？

Answer 1

这是因为您混淆了创建图表和添加更多数据的功能。通过将它们分开来修复它，如下所示。

var canvas = document.getElementById("canvasChart");
var $chart;
function createChart(ID) {
  console.log(canvas);
  console.log(chartsParams);
  $chart = new Chart(canvas, chartsParams['myChart']);
}

function addData() {
  $chart.data.datasets.push({
    label: 'Added',
    data: [12, 32, 43, 53]
  });
  $chart.update();
}

createChart();
document.getElementById("addButton").addEventListener("click", addData);

此处演示:https://jsfiddle.net/es0kt36e/2/