ng2图表条形图中的堆叠列之间的线

编程问答 2022-08-15

问题描述

我正在制作ng2-charts堆叠条形图，希望在其中实现每个系列之间的分离。与下图类似。线条或背景阴影都可以。

enter image description here

我分别实现了堆叠的条形图和折线图。如何实现堆叠条形图中的线条/阴影以区分列。

Stackblitz | Stacked bar graph

Stackblitz | Line Chart

解决方法

您可以通过在示例中使用type: line而不是stack再次传递相同的数据来在条形图中添加线条。

替换下面的代码

public barChartData: ChartDataSets[] = [
  { data: [35,41,60,19,44,45,46,77,64,56],label: 'Series A',stack: 'a' },{ data: [65,59,40,81,56,55,54,23,36,44],label: 'Series B',stack: 'a' }
];

与此

 public barChartData: ChartDataSets[] = [
      { data: [35,{ data: [35,type: 'line' },// new line
      { data: [65,stack: 'a' }
    ];

可能有比复制数据更好的方法。但是我什么都不知道

angularng2-charts