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

Question

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

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

Stackblitz | Stacked bar graph

Stackblitz | Line Chart

Answer 1

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

替换下面的代码

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

与此

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

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