Apex Chart

* 영어표기가 디폴트, 이하 한글표기

* Angular 기준

2024.01.26 - 1차 수정 / 설명 수정 및 추가

---

전에 포스팅한 Chart 보다 예쁘고 기능이 다양해서 사용하게됨

 

0. 이게 뭔가요.

https://apexcharts.com/

- 차트 라이브러리

---

1. 사용방법

- 기본: https://apexcharts.com/docs/installation/

- angular(꼭 보세요!): https://apexcharts.com/docs/angular-charts/

 

1). 설치 (권장)

터미널 창

npm install apexcharts --save

- 설치 과정에서 오류 뜨면 --legacy-peer-deps(의존성 무시), --force(강제설치)

 

 

1-1). 혹은 사용하려는 컴포넌트의 HTML 에 Direct <script> include

사용중인 컴포넌트.HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts">

 

 

 

---

2). app.module 과 사용중인 컴포넌트의 TS 파일에 에 import 

app.module

import { NgApexchartsModule } from 'ng-apexcharts';

 

사용중인 컴포넌트.ts

import {           ChartComponent,           ApexAxisChartSeries,           ApexChart,           ApexXAxis,           ApexTitleSubtitle,           ApexDataLabels,           ApexLegend,           ApexAnnotations,           ApexNonAxisChartSeries,           ApexStroke,           ApexFill,           ApexMarkers,           ApexYAxis,           ApexGrid,           ApexStates } from "ng-apexcharts" ;

 

 

2-1). 인터페이스 설정

사용중인 컴포넌트.ts

export type ChartOptions = {           series: ApexAxisChartSeries;           chart: ApexChart;           title: ApexTitleSubtitle;           xaxis: ApexXAxis;           yaxis: ApexYAxis;           stroke: ApexStroke;           dataLabels: ApexDataLabels;           markers: ApexMarkers;           tooltip: any; // ApexTooltip;           grid: ApexGrid;           legend: ApexLegend; };

 

 

2-2). viewClid 설정 (설치된 차트 라이브러리을 읽기 위해서)

사용중인 컴포넌트.ts

@ViewChild('apexchart') apexchart_Canvas?: ViewContainerRef;    @ViewChild("chart") chart!: ChartComponent;   chartOptions!: Partial;

 

 

2-3). 차트 옵션 설정

사용중인 컴포넌트.ts

this.chartOptions = { ..... }

https://apexcharts.com/docs/options/annotations/

 

 

---

3). 해당 컴포넌트의 HTML 에 원하는 위치에 띄워준다.

사용중인 컴포넌트.HTML

<apx-chart #chart        [series]="this.chartOptions.series!"        [chart]="this.chartOptions!.chart!"       [legend]="this.chartOptions!.legend!"        [dataLabels]="this.chartOptions!.dataLabels!"       [stroke]="this.chartOptions!.stroke!"        [grid]="this.chartOptions!.grid!"       [tooltip]="this.chartOptions!.tooltip"       [xaxis]="this.chartOptions!.xaxis!"       [yaxis]="this.chartOptions!.yaxis!"> </apx-chart>

 

 

 

 

화이팅입니다.

모두들 오늘도 행복하세요!