Chart.js:图表类型的动态变化(例如从折线到条形图)

0vvn1miw  于 2022-11-06  发布在  Chart.js
关注(0)|答案(7)|浏览(217)

我正在尝试根据选择框更改来热交换图表类型。如果数据需要更新,它会更改。
例如,在页面加载时,我创建了一个如下所示的图表:

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

xeufq47z

xeufq47z1#

修复

  • 销毁旧图表(以删除事件侦听器并清除画布)
  • 创建配置对象的深层副本
  • 更改副本的类型
  • 传递副本而不是原始对象。

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'。您可以进入修改后的对象,将所有内容更改为您想要的类型,但只保存原始配置对象要容易得多。

ovfsdjhp

ovfsdjhp2#

为了进一步说明,现在v.2.1.3中修复了此问题,随后是https://stackoverflow.com/users/239375/nathan

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

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

ikfrs5lh

ikfrs5lh3#

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

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

var myChart = new Chart(ctx, chartCfg );

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

amrnrhlw4#

在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
codepen示例:https://codepen.io/3zbumban/pen/yLKMMJx

j13ufse2

j13ufse25#

另一种解决方案可以很简单,在单独的Div元素中创建两个图表。然后根据您的条件,在javascript中使一个可见并隐藏另一个。这应该可以满足您更改图表类型以满足您的要求的目的。

jpfvwuh4

jpfvwuh46#

在ChartJS中,图表类型也可以像图表数据一样轻松更改。

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

ut6juiuv7#

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

相关问题