chartjs removing/redrawing canvas，图表没有响应

Question

我一直在尝试删除并重绘 canvas 但我无法使其响应。

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);

responsive 和 mantainaskectratio 都设置为 true

responsive: true,
maintainAspectRatio: true

这是我的代码的简化版本，但我无法让它工作。重要的是要注意 .destroy() 或 .clear() 方法不符合我的需要！

这里是一个活生生的例子和整个测试代码 https://jsfiddle.net/ob0w8thn/11/

Answer 1

it's important to note that .destroy() or .clear() methods dont fit my needs!

我认为这里出了点问题。这里的根本问题是您没有破坏您首先创建的图表，即 testChart。简单地删除节点并不能完全清除它。

Chart.js 在内部存储创建的图表的所有实例。当您调整 window 大小时，Chart.js 循环遍历此列表运行并在每个实例上调整大小。在上面的代码中，它会出错，因为第一个实例不再在 DOM 中，并且永远不会为第二个实例触发调整大小 testChart2

我强烈建议您在执行 .remove().[= 之前评估为什么不能执行 .destroy()（这只是从 Chart.js 内部列表中删除实例） 21=]

但是，如果由于某些原因您无法调用 .destroy()，您可以执行以下操作之一

选项 1

编写您自己的 window 调整大小处理程序来触发调整您想要的图表实例的大小，就像这样

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 触发（不必要的）错误，从而导致调整不存在于 Chart.js 中的实例的大小DOM.

这是选项 3 的实际操作

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

chartjs removing/redrawing canvas，图表没有响应

chartjs removing/redrawing canvas, graph not responsive

jquery

twitter-bootstrap

chart.js