chartjs удаление/перерисовка холст, график не реагирует

Question

Я пытался удалить и перерисовать холст, но я не могу сделать его отзывчивым.

var testChart = document.getElementById('testLine').getContext('2d'); 
var myLineChart = new Chart(testChart).Line(lineData); 
$("#testLine").remove(); 
$("#graph-container").html("<canvas id='testLine'></canvas>"); 
var testChart1 = document.getElementById('testLine').getContext('2d'); 
var myLineChart1 = new Chart(testChart1).Line(lineData); 

как отзывчивый и mantainaskectratio устанавливаются истинной

responsive: true, 
maintainAspectRatio: true 

это упрощенная версия моего кода, но я не могу заставить его работать. важно отметить, что методы .destroy() или .clear() не соответствуют моим потребностям!

здесь живой пример и весь код теста https://jsfiddle.net/ob0w8thn/11/

Answer 1

, важно отметить, что .destroy() или .clear() методы DonT подходят мои потребности!

Я думаю, что здесь что-то не так происходит. Основная проблема здесь заключается в том, что вы не уничтожаете созданную вами диаграмму, то есть testChart. Простое удаление узла не полностью очищает его.

---

Chart.js внутренне хранит все экземпляры созданных диаграмм. Когда вы изменяете размер окна, Chart.js проходит через этот список, на котором выполняется изменение размера для каждого экземпляра. В вашем коде выше, это ошибка, потому что первый экземпляр больше не находится в DOM, и изменение размера никогда не срабатывает для второго экземпляра. testChart2

Я бы настоятельно предложил вам оценить, почему вы не можете сделать .destroy() (это просто удаляет экземпляр из внутреннего списка Chart.js) перед выполнением .remove().

Однако, если есть какая-то причина вы не можете назвать .destroy(), вы можете сделать одно из ниже

---

Варианта 1

Написать свое собственное окно изменения размера обработчика, который вызывает изменение размеров за исключением случаев, диаграммы, которые вы хотите, как так

Chart.helpers.addEvent(window, "resize", (function() { 
    var timeout; 
    return function() { 
     clearTimeout(timeout); 
     timeout = setTimeout(function() { 
      myLineChart1.resize(myLineChart1.render, true); 
     }, 50); 
    }; 
})()); 

Вариант 2

Перепишите getMaximumWidth функцию в библиотеке Chart.js добавить попробовать поймать блок, например, так (просто поиск по первой линии, чтобы найти блок)

getMaximumWidth = helpers.getMaximumWidth = function (domNode) { 
    try { 
     var container = domNode.parentNode; 
     // TODO = check cross browser stuff with this. 
     return container.clientWidth; 
    } 
    catch (err) 
    {} 
}, 

Вариант 3

Снимите реагирующий вариант для диаграммы перед удалением его узел, например, так

myLineChart.options.responsive = false; 
$("#testLine").remove(); 

Хотя это не удаляет ненужную ссылку из внутреннего списка Chart.js, это предотвращает запуск Chart.js (ненужной) ошибки, вызывающей изменение размера для экземпляра, который не существует в DOM.

---

Вот Вариант 3 в действии

Fiddle - https://jsfiddle.net/0vfqw61q/