ng2 charts
v6.0.1
Chart.js를 기반으로하는 Angular에 대한 아름다운 차트
ng2-charts 사용한 샘플
https://valor-software.com/ng2-charts/
Angular CLI를 사용하여 NG2 차트를 설치할 수 있습니다.
ng add ng2-charts 필요한 패키지가 자동으로 설치되며 app.config.ts 는 라이브러리를 즉시 사용하기 위해 필요한 변경 사항으로 업데이트됩니다.
NPM을 사용하여 NG2 차트를 설치할 수 있습니다.
npm install ng2-charts --save또는 원사 :
yarn add ng2-charts --save 또한 응용 프로그램에 Chart.js 라이브러리를 설치하고 포함시켜야합니다 (이 라이브러리의 피어 종속성이며 추가 정보는 공식 chart.js 문서에서 찾을 수 있습니다).
npm install chart.js --save또는 원사로 :
yarn add chart.js --save독립형 구성 요소에서 지침을 가져 오십시오.
import { BaseChartDirective } from 'ng2-charts' ;
@ Component ( {
standalone : true ,
imports : [ BaseChartDirective ] ,
} )
export class MyComponent { } 일반적으로 main.ts 에 구성을 제공하십시오.
import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;
bootstrapApplication ( AppComponent , {
providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
} ) . catch ( ( err ) => console . error ( err ) ) ;또는 번들 크기를 줄이기 위해 최소 구성을 포함하십시오.
provideCharts ( { registerables : [ BarController , Legend , Colors ] } ) ;또는 귀하의 AppModule에서 :
import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;
@ NgModule ( {
providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
bootstrap : [ AppComponent ] ,
} )
export class AppModule { }| NG2 차트 버전 | ||||||
| 각도 버전 | v1.x | v2.x | v3.x | v4.x | v5.x | v6.x |
| 2-9 | ✓ | |||||
| 10 | ✓ | |||||
| 11 | ✓ | |||||
| 12 | ✓ | |||||
| 13 | ✓ | |||||
| 14 | ✓ | ✓ | ||||
| 15 | ✓ | ✓ | ||||
| 16 | ✓ | |||||
| 17 | ✓ | ✓ | ||||
모든 차트 유형에 대한 하나의 지침이 있습니다 : baseChart 및 8 가지 유형의 차트가 있습니다 : line , bar , radar , pie , polarArea , doughnut , bubble 및 scatter . 다음과 같이 canvas 요소의 지침을 사용할 수 있습니다.
< canvas baseChart [data] =" barChartData " [options] =" barChartOptions " [type] =" 'bar' " > </ canvas >참고 : 가능한 옵션에 대한 자세한 내용은 원본 Chart.js 문서를 참조하십시오.
type : ( ChartType ) - 차트 유형을 나타냅니다. line , bar , radar , pie , polarArea , doughnut 또는 Chart.js에 추가 된 사용자 정의 유형이 될 수 있습니다.data : ( ChartData<TType, TData, TLabel> ) - 전체 데이터 구조가 차트에서 렌더링됩니다. 다양한 유연한 형식과 구문 분석 옵션을 지원하십시오. 여기를 참조하십시오. 대안 및 차트 type 에 따라 labels 및 datasets 속성을 사용하여 개별 옵션을 지정할 수 있습니다.labels : ( TLabel[] ) - 데이터 세트 레이블. 차트에는 line , bar 및 radar 필요합니다. 차트를위한 라벨 (호버) : polarArea , pie 및 doughnut . 레이블은 datasets 배열과 순서대로 일치합니다.datasets : ( ChartDataset<TType, TData>[] ) - data 입력의 datasets 속성과 동일합니다. 자세한 내용은 여기를 참조하십시오.options : ( ChartOptions<TType> ) - 차트 옵션 (Chart.js 문서에 따라).legend : ( boolean = false ) - 사실이라면 차트 범례가 표시됩니다.chartClick : 차트를 클릭하면 화재가 발생하고 활성 포인트 및 레이블에 관한 정보를 반환합니다.chartHover : 차트에서 MouseMove (호버)가 발생했을 때 화재가 발생하면 활성 포인트 및 레이블에 관한 정보를 반환합니다.기본적 으로이 라이브러리는 Chart.js에 의해 정의 된대로 색상을 사용합니다. 색상을 더 많이 제어 해야하는 경우, 예를 들어 : 즉시 색상을 생성하는 경우 고급 컬러 팔레트를 참조하십시오.
ThemeService 통해 클라이언트는 색상을 지정하는 구조를 설정할 수 있습니다. 이 서비스는 주제에 맞는 색상으로 동적 테마가 변경 될 때 호출 될 수 있습니다. 구조는 배열을 다룰 때 특수 기능을 갖춘 재정의로 해석됩니다. 예:
type Theme = 'light-theme' | 'dark-theme' ;
private _selectedTheme: Theme = 'light-theme' ;
public get selectedTheme ( ) {
return this . _selectedTheme ;
}
public set selectedTheme ( value ) {
this . _selectedTheme = value ;
let overrides : ChartOptions ;
if ( this . selectedTheme === 'dark-theme' ) {
overrides = {
legend : {
labels : { fontColor : 'white' }
} ,
scales : {
xAxes : [ {
ticks : { fontColor : 'white' } ,
gridLines : { color : 'rgba(255,255,255,0.1)' }
} ] ,
yAxes : [ {
ticks : { fontColor : 'white' } ,
gridLines : { color : 'rgba(255,255,255,0.1)' }
} ]
}
} ;
} else {
overrides = { } ;
}
this . themeService . setColorschemesOptions ( overrides ) ;
}
constructor ( private themeService : ThemeService < AppChartMetaConfig > ) {
}
setCurrentTheme ( theme : Theme ) {
this . selectedTheme = theme ;
} overrides 객체는 차트 옵션 객체 차트를 ChartOptions 간단한 필드가 발생하는 경우 options 객체의 일치 필드를 대체합니다. 배열이 발생하면 (위의 xAxes 및 yAxes 필드에서와 같이) 배열 내부의 단일 객체는 options 객체의 일치 필드의 모든 배열 요소를 무시하는 템플릿으로 사용됩니다. 따라서 위의 경우 모든 축은 진드기와 그리드 라인 색상이 변경됩니다.
버그 및 기능 요청을보고 할 때이 지침을 따르십시오.
이해해 주셔서 감사합니다!
MIT 라이센스 (전체 텍스트의 라이센스 파일 참조)
이 도서관이 마음에 들고 감사하다고 말하고 싶다면 커피를 사는 것을 고려하십시오!
