我一直在尝试删除和重绘画布,但我无法使其响应。
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);
响应和mantainaskecttio都设置为true
responsive: true,
maintainAspectRatio: true
这是我的代码的简化版本,但我无法使其工作。重要的是要注意.destroy()或.clear()方法不符合我的需要!
这是一个实例和整个测试代码 https://jsfiddle.net/ob0w8thn/11/
答案 0 :(得分:1)
重要的是要注意.destroy()或.clear()方法不适合我的 需要!
我认为这里发生了一些错误。这里的根本问题是你没有破坏你首先创建的图表,即testChart
。简单地删除节点不会完全清除它。
Chart.js在内部存储所创建图表的所有实例。当您调整窗口大小时,Chart.js循环遍历此列表,在每个实例上运行调整大小。在上面的代码中,它出错了,因为第一个实例不再在DOM中,并且永远不会为第二个实例触发调整大小testChart2
我强烈建议您在执行.destroy()
之前评估为什么不能执行.remove()
(这只是从Chart.js内部列表中删除实例)。
但是,如果您有某种原因无法拨打.destroy()
,则可以执行以下操作之一
选项1
编写自己的窗口调整大小处理程序,触发调整所需图表实例的大小,如此
Chart.helpers.addEvent(window, "resize", (function () {
var timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(function () {
myLineChart1.resize(myLineChart1.render, true);
}, 50);
};
})());
选项2
重写 Chart.js库中的getMaximumWidth
函数以添加try catch块,就像这样(只搜索找到块的第一行)
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的实际应用