Question

我浏览了ng2-charts的文档，但找不到类似Stacked Bar的文档。还有其他方法可以在ng2-charts中实现堆积条形图吗？请帮帮我

Answer 1

这是绝对受支持的，它记录在chart.js documentation中。您只需使用stack对象上的datasets属性定义将哪些数据集堆叠在一起：

public barChartData: ChartDataSets[] = [
  { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: 'a' },
  { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: 'a' }
];

例如，请参见此stackblitz。

Answer 2

实现“水平和垂直堆积条形图”的简单方法
使用图表“选项”使其变得简单，请检查代码。
在.ts

public barChartOptions = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
  xAxes: [
    {
      stacked: true, 
      ticks: {
        stepSize: 1
      }
    }
  ],
  yAxes: [
    {
      stacked: true,
    }
  ]
},

};

在模板中

<帆布基本图表 [datasets] =“ barChartData” [labels] =“ barChartLabels” [options] =“ barChartOptions” [legend] =“ barChartLegend” [chartType] =“ barChartType”>

检查Stackblitz上的完整代码。

ng2-chart中的堆积条

2 个答案: