Chart.js：图表类型的动态变化（以线到条为例）

Question

我正在尝试根据 select 框变化来热交换图表类型。如果数据需要更新，它会改变。

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

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); 并且它 returns bar，而不是 line

Answer 1

替代解决方案可以像在单独的 Div 元素中创建两个图表一样简单。然后根据您的情况，只在 javascript 中显示一个并隐藏另一个。这应该可以满足您根据需要更改图表类型的目的。

Answer 2

修复

销毁旧图表（删除事件侦听器并清除 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);

注意：使用 Chart.js

的 2.0.1 版

为什么这有效

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

Answer 3

只是为了跟进，这现在已在 v.2.1.3 中修复，随后 https://whosebug.com/users/239375/nathan

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

已确认已在最新版本中修复。查看 http://codepen.io/anon/pen/ezJGPB 并按图表下方的按钮将其从条形图更改为折线图。

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

Answer 6

在 ChartJS 3 中：

var options = // your options.
var data = { ...myChart.data }; // deep copy of the data
var ctx = document.getElementById('myChart_id').getContext('2d');

myChart.destroy()

/// Modify ctx or data if you need to.

myChart = new Chart(ctx, {
        type: chart_type,
        data: data
});

Chart.options = options;
myChart.update();

Answer 7

在 chart.js 3.8.0 中，您可以这样做：


let chart = new Chart(ctx, {
  type: "line",
  data: {
    // ...
  },
  options: {
    // ...
  }
});

chart.config.type = "bar";
chart.update();

您也可以通过这种方式更改数据和选项

chart.js 更新文档： https://www.chartjs.org/docs/latest/developers/updates.html

Chart.js：图表类型的动态变化（以线到条为例）

Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)

vue.js

chart.js

修复

为什么这有效