Chart.js:图表类型的动态变化(以线到条为例)

Question

我正在尝试根据选择框的变化来热交换图表类型。如果数据需要更新，它就会发生变化。

例如，在页面加载时，我创建了一个这样的图表:

var config = {
     type: 'line',
     data: {
        labels: this.labels,
        datasets: [{
            label: 'Some Label',
            data: this.values
        }]
     },
     options: {
         responsive: true
     }
}
var context = document.getElementById('canvas').getContext('2d');
window.mychart = new Chart(context, config);

但随后我将组合框更改为条形图。我在页面加载时使用条形图测试了数据，效果很好。

这是我尝试更改图表的方式。

window.mychart.destroy();

// chartType = 'bar'
config.type = chartType;

var context = document.getElementById('canvas').getContext('2d');
window.mychart = new Chart(context, config);

window.mychart.update();
window.mychart.render();

但是没有任何反应。折线图仍然存在。如何动态更改图表类型？ (即使这意味着销毁和重新创建图表 Canvas )。

更新

请注意，它看起来实际上是在破坏图表，但一直在重新绘制折线图，​​即使我执行了 console.log(config.type); 并且它返回了 bar，而不是行

Answer 1

修复

• 销毁旧图表(以删除事件监听器并清除 Canvas )
• 深拷贝配置对象
• 更改文案类型
• 传递副本而不是原始对象。

Here is a working jsfiddle example

示例概述:

var temp = jQuery.extend(true, {}, config);
temp.type = 'bar'; // The new chart type
myChart = new Chart(ctx, temp);

注意:使用 2.0.1 版的 Chart.js

为什么这行得通

Chart.js 会修改您传入的配置对象。因此，您不能只更改“config.type”。您可以进入修改后的对象并将所有内容更改为您想要的类型，但只保存原始配置对象要容易得多。