ng2-charts 条形图中堆积柱之间的线

Question

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

我分别实现了堆叠条形图和折线图。如何在堆叠条形图中实现 lines/shades 以区分列。

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' }
    ];

可能有比这更好的方法来代替复制数据。但是我不知道任何

ng2-charts 条形图中堆积柱之间的线

Lines between stacked columns in ng2-charts bar graph

angular

ng2-charts