Ionic 2의 차트

Question

Ionic 2를 사용하는 앱에서 차트를 만들어야합니다. 웹을 검색했지만 일부 매우 드문 모델을 발견했습니다. 또한 http://www.chartjs.org이지만 그의 문서는 매우 열악합니다.

나는 대부분 클릭 이벤트가있는 도넛 형 차트가 필요합니다. 또는 chartjs 도넛 형 차트에서 클릭 이벤트를 사용할 수 있습니까? 어떻게해야합니까?

Answer 1

각도 2/4의 ChartJS 래퍼 인 ng2-charts을 사용해야합니다.

다음과 같이을 (클릭 이벤트와) 간단한 도넛 차트 을 만들 수있는이 사용 :

템플릿

<div id="chart-container"> 
    <canvas baseChart 
      [chartType]="chartType" 
      [data]="chartData" 
      [labels]="chartLabels" 
      (chartClick)="chartClicked($event)"> 
    </canvas> 
</div> 

구성 요소

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 

    public chartType: string = 'doughnut'; 
    public chartLabels: Array<string> = ['Jan', 'Feb', 'Mar']; 
    public chartData: Array<number> = [1, 1, 1]; 

    public chartClicked(e: any): void { 
    if (!e.active.length) return; //return if not clicked on chart/slice 
    alert('Clicked on Chart!'); 
    } 

} 

LIVE DEMO

_{노트 (이 이온 2에 구현하기 위해 너무 열심히 안) : 더, 당신의 필요에 맞게 다음과이 도넛 차트의 단지 기본적인 예입니다 당신이 그것을 사용자 정의 할 수 있습니다 official documentation.}