chartjs删除/重绘画布,图形无响应

时间:2015-08-14 11:47:48

标签: jquery twitter-bootstrap chart.js

我一直在尝试删除和重绘画布,但我无法使其响应。

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/

1 个答案:

答案 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的实际应用

小提琴 - https://jsfiddle.net/0vfqw61q/