如何通过鼠标悬停和几个更新来解决Chart.js 2.0问题? [英] How to solve a Chart.js 2.0 issue with mouseover and several updates?

问题描述

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

Very strange, I have a Chart.js chart that I need to update dinamically. The update works fine, but if you move the mouse over the chart or click several times the button Update (Add data), the bars and the lines disappear and in the console shows this error:

Uncaught TypeError: Cannot read property 'draw' of null

请多次单击该按钮，您可以对其进行缓慢或快速的测试.单击添加数据"按钮后，也将鼠标移到图表上.

Please click on the button several times, you can test it slowly or quickly. Pass the mouse over chart too after click the "Add data" button.

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

You can test this at: https://jsfiddle.net/s9zraysh/

如何避免此错误?

推荐答案

这是因为您混合使用了功能以创建图表并添加更多数据.如下图所示将它们分开来固定它.

It is because you mixed up the functions to create a chart and add more data. Fixed it by separating them as shown below.

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/

这篇关于如何通过鼠标悬停和几个更新来解决Chart.js 2.0问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！