ng2グラフの棒グラフの積み重ねられた列間の線

Aug 21 2020

ng2-charts各シリーズを分離したい積み上げ棒グラフに取り組んでいます。下の画像に似たもの。線または背景の陰影は何でも問題ありません。

積み上げ棒グラフと折れ線グラフを別々に実装しました。積み上げ棒グラフで線/陰影を作成して列を区別するにはどうすればよいですか。

Stackblitz | 積み上げ棒グラフ

Stackblitz | 折れ線グラフ

回答

1 Rohith Aug 21 2020 at 16:54

type: linestackはなく、に同じデータを再度渡すことで、棒グラフに線を追加できます。

以下のコードを置き換えます

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

データを複製する代わりに、これよりも優れたアプローチがあるかもしれません。しかし、私は何も知りません