我正在尝试根据选择框更改来热交换图表类型。如果数据需要更新,它会更改。
例如,在页面加载时,我创建了一个如下所示的图表:
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();
但是什么都没有发生。折线图仍然存在。我如何动态地更改图表类型?(即使这意味着破坏并重新创建图表画布)。
更新
请注意,它看起来像是在破坏图表,但却一直在重新绘制折线图,即使我执行console.log(config.type);
,它返回的是bar
,而不是line
7条答案
按热度按时间xeufq47z1#
修复
Here is a working jsfiddle example
示例概述:
注意:使用Chart.js的2.0.1版
为什么这样做
Chart.js修改传入的配置对象。因此,您不能只更改'config.type'。您可以进入修改后的对象,将所有内容更改为您想要的类型,但只保存原始配置对象要容易得多。
ovfsdjhp2#
为了进一步说明,现在v.2.1.3中修复了此问题,随后是https://stackoverflow.com/users/239375/nathan
已确认在最新版本中修复。 checkout http://codepen.io/anon/pen/ezJGPB并按下图表下方的按钮将其从条形图更改为折线图。
ikfrs5lh3#
不需要销毁和重新创建,您只需要从图表的配置变量中更改类型,然后更新图表。
amrnrhlw4#
在chart.js 3.8.0中,您可以这样做:
您也可以通过这种方式更改数据和选项
chart.js更新文档:https://www.chartjs.org/docs/latest/developers/updates.html
codepen示例:https://codepen.io/3zbumban/pen/yLKMMJx
j13ufse25#
另一种解决方案可以很简单,在单独的Div元素中创建两个图表。然后根据您的条件,在javascript中使一个可见并隐藏另一个。这应该可以满足您更改图表类型以满足您的要求的目的。
jpfvwuh46#
在ChartJS中,图表类型也可以像图表数据一样轻松更改。
ut6juiuv7#
在ChartJS 3中: