ng2-charts条形图中堆积列之间的线答案

【问题标题】：Lines between stacked columns in ng2-charts bar graphng2-charts条形图中堆积列之间的线
【发布时间】：2020-08-21 18:06:10
【问题描述】：

我正在处理ng2-charts 堆积条形图，我想在其中实现每个系列之间的分离。类似于下图的东西。线条或背景阴影什么都可以。

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

Stackblitz | Stacked bar graph

Stackblitz | Line Chart

【问题讨论】：

标签： angular ng2-charts

【解决方案1】：

您可以通过在您的示例中使用 type: lineto 而不是 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' }
    ];

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

【讨论】：