ng2-charts中的堆积条形图

Question

我已经阅读了ng2-charts的文档，但是我没有找到类似于Stacked Bar（堆积条形图）的东西。是否有其他方法可以在ng2-charts中实现堆积条形图？请帮帮我。

- Felix Christo

---

在我看来，为了启用条形图的堆叠功能，您需要更改x和y轴的设置。请参阅此处的聊天配置选项[https://valor-software.com/ng2-charts/#BarChart]，以及chart.js官方文档[https://www.chartjs.org/docs/latest/charts/bar.html]。 - dc7

Answer 1

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

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示例。

- Aviad P.

Answer 2

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

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

};

在模板中

<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType"> </canvas>

请查看Stackblitz上的完整代码。

- Siddharth

---

欢迎来到Stack Overflow！虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。仅有链接的答案如果链接页面发生更改可能会变得无效。 - Rayan Ral