修复

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

但没有任何反应。折线图仍然存在。如何动态更改图表类型？（即使这意味着破坏和重新创建图表画布）。

更新

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

Answer 1

修复

销毁旧图表（删除事件监听器并清除画布）
制作配置对象的深层副本
更改副本的类型
传递副本而不是原始对象。

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会修改您传入的配置对象。因此，您无法更改＆＃39; config.type＆＃39;。您可以进入修改后的对象并将所有内容更改为您想要的类型，但只保存原始配置对象要容易得多。

Answer 2

只是为了跟进，现在已经在v.2.1.3中修复了这个问题，后面是code base

document.getElementById('changeToLine').onclick = function() {
  myChart.destroy();
  myChart = new Chart(ctx, {
    type: 'line',
    data: chartData
  });
};

在最新版本中确认已修复。查看https://stackoverflow.com/users/239375/nathan并按下图表下方的按钮，将其从条形图更改为折线图。

Answer 3

替代解决方案可以像在单独的Div元素中创建两个图表一样简单。然后根据你的条件，只需在javascript中显示一个并隐藏其他内容。这应该用于更改您的要求的图表类型。

Answer 4

在 ChartJS 中，图表类型也可以像图表数据一样轻松更改。以下示例可能会有所帮助

        my_chart.type = 'bar';
        my_chart.update();

Answer 5

无需销毁和重新创建，您只需从图表的配置变量中更改类型，然后更新图表。

var chartCfg = {
    type: 'pie',
    data: data
};

var myChart = new Chart(ctx, chartCfg );

function changeToBar() {
    chartCfg.type = "bar";
    myChart.update();
}

Chart.js：动态更改图表类型（行到栏为例）

5 个答案:

修复

为什么会这样？