时间戳

首页 > 解决方案 > ng2-charts条形图中堆积列之间的线

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

问题描述

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

在此处输入图像描述

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

堆栈闪电战 | 堆积条形图

堆栈闪电战 | 折线图

标签： angularng2-charts

解决方案

type: line您可以通过再次使用to 而不是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' }
    ];

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

推荐阅读