Как решить проблему с Chart.js 2.0 с помощью мыши и нескольких обновлений?

Question

Очень странно, у меня есть диаграмма Chart.js, которую мне нужно обновить динамически. Обновление работает отлично, но если вы переместите курсор на графике или нажмите несколько раз кнопку Update (Добавить данные), бары и линии исчезают, и в консоли показывает эту ошибку:

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/