Angular에서 드릴다운 차트를 작성하는 방법은 무엇입니까?

드릴다운 차트는 추가 정보와 함께 데이터를 자세히 표시하는 데 널리 사용됩니다. 드릴다운 차트는 상위-하위 데이터/차트 간의 관계를 보여줍니다. 예: 차트는 연간 판매 데이터(2010, 2011, 2012,...)를 표시할 수 있으며 연도를 클릭하면 특정 연도의 월별/분기별 데이터가 표시됩니다. 이 기사에서는 CanvasJS 각도 차트를 사용하여 각도에서 드릴다운 차트를 만드는 방법을 간략하게 설명합니다.

전제 조건

CanvasJS Angular Charts

프로젝트에 CanvasJS 지시문 추가

this link에서 CanvasJS를 다운로드합니다.

각도 차트 구성 요소 파일을 프로젝트에 추가합니다(canvasjs.min.js 및 canvasjs.angular.component.js).

CanvasJS 모듈 등록

import { NgModule } from '@angular/core';
import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
})
export class AppModule { }

자세한 정보/문제 해결은 CanvasJS Angular Integration 섹션을 참조하십시오.

드릴다운 데이터 구조화

CanvasJS는 JSON 형식의 데이터를 허용합니다. 그렇다고 해서 데이터를 항상 JSON 파일에 저장해야 한다는 의미는 아닙니다. 이는 단순히 데이터를 차트 옵션에 전달하기 전에 JSON 형식으로 구문 분석해야 함을 의미합니다. 데이터는 JSON/XML/CSV 파일 또는 로컬 JavaScript 변수에서 읽을 수 있습니다.
드릴 다운 차트를 작성하려면 상위(연간) 및 하위(분기별) 데이터가 있어야 합니다.

yearlyData: [{
  cursor: 'pointer',
  dataPoints: [
    {
      label: "2019",
      y: 191630,
      name: "2019",
      color: '#f2c80f'
    }, {
      label: "2020",
      y: 203770,
      name: "2020",
      color: '#fc625e'
    }, {
      label: "2021",
      y: 193700,
      name: "2021",
      color: '#01b8aa'
    }]
}],
drilldownData: {
    '2019': [{
      color: "#f2c80f",
      dataPoints: [
        { label: 'Q1', y: 48980 },
        { label: 'Q2', y: 42690 },
        { label: 'Q3', y: 46980 },
        { label: 'Q4', y: 52980 }
      ]
    }],
    '2020': [{
      color: '#fc625e',
      dataPoints: [
        { label: 'Q1', y: 51780 },
        { label: 'Q2', y: 48590 },
        { label: 'Q3', y: 52500 },
        { label: 'Q4', y: 50900 }
      ]
    }],
    '2021': [{
      color: '#01b8aa',
      dataPoints: [
        { label: 'Q1', y: 42600 },
        { label: 'Q2', y: 44960 },
        { label: 'Q3', y: 46160 },
        { label: 'Q4', y: 48240 }
      ]
    }]
}

클릭 시 드릴다운 수행

데이터 포인트에 바인딩click event합니다. Update the chart data 데이터 포인트를 클릭하고 차트를 다시 렌더링합니다.

drilldownHandler = (e: any) => {
    this.chart.options = this.drilldownChartOptions;
    this.chart.options.data = this.options.drilldown[e.dataPoint.name];
    this.chart.options.title = { text: e.dataPoint.name };
    this.chart.render();
};

열을 클릭한 후 뒤로 이동하는 버튼을 추가합니다. 위에서 언급한 코드를 클러빙하면 드릴다운 차트를 작성할 수 있습니다. 아래는 작업 샘플입니다.