我试图根据选择框更改热交换图表类型.如果需要更新数据,则会更改.
例如,在页面加载时,我创建一个如下图表：
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();
但没有任何反应.折线图仍然存在.如何动态更改图表类型？ (即使它意味着破坏和重新创建图表画布).
UPDATE
注意它看起来实际上是在破坏图表,但是不断重绘折线图,即使我做了console.log(config.type);它返回bar,而不是line
解决方法
修复
>销毁旧图表(删除事件监听器并清除画布)
>制作配置对象的深层副本
>更改副本的类型
>传递副本而不是原始对象.
Here is a working jsfiddle example
示例概述：
var temp = jQuery.extend(true,{},config);
temp.type = 'bar'; // The new chart type
myChart = new Chart(ctx,temp);
注意：使用Chart.js的2.0.1版
为什么会这样
Chart.js修改你传入的配置对象.因此你不能只改变’config.type’.您可以进入修改后的对象并将所有内容更改为所需的类型,但只保存原始配置对象要容易得多.
