ng2-charts 막대 그래프의 누적 열 사이의 선

Aug 21 2020

ng2-charts각 시리즈를 분리하려는 누적 막대 그래프를 작업 중입니다 . 아래 이미지와 유사한 것. 선 또는 배경 음영은 무엇이든 괜찮습니다.

누적 막대 차트와 꺾은 선형 차트를 별도로 구현했습니다. 열을 구분하기 위해 누적 막대 그래프에서 선 / 음영을 어떻게 얻을 수 있습니까?

Stackblitz | 누적 막대 그래프

Stackblitz | 라인 차트

답변

1 Rohith Aug 21 2020 at 16:54

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

데이터를 복제하는 대신 이것보다 더 나은 접근 방법이있을 수 있습니다. 그러나 나는 아무것도 모른다