Ionic2 프레임 워크의 차트 구현

Question

Ionic2 프레임 워크에서 반응 형 차트 (파이 차트)를 구현하는 가장 쉬운 방법은 무엇입니까?

Answer 1

답을 찾고 계시다면 ChartJs 2.0으로 샘플 ionic 2 프로젝트를 만들고 홈 페이지에 원형 차트를 표시했습니다.

당신은

로 차트를 렌더링 home.html을

에 다음

<script src="assets/libs/Chart.bundle.js"></script>

과로 index.html을 파일 내부의 chartjs.bundle.js 파일을 포함 할 필요가

<chart [labels]="labels" [data]="data" type="bar"></chart> 

및 home.ts

...  
import { Chart } from 'ng2-chartjs2'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    labels: string[] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]; 
    data: Chart.Dataset[] = [ 
    { 
     label: '# of Votes', 
     data: [12, 19, 3, 5, 2, 3], 
     backgroundColor: [ 
     'rgba(255, 99, 132, 0.2)', 
     'rgba(54, 162, 235, 0.2)', 
     'rgba(255, 206, 86, 0.2)', 
     'rgba(75, 192, 192, 0.2)', 
     'rgba(153, 102, 255, 0.2)', 
     'rgba(255, 159, 64, 0.2)' 
     ], 
     borderColor: [ 
     'rgba(255,99,132,1)', 
     'rgba(54, 162, 235, 1)', 
     'rgba(255, 206, 86, 1)', 
     'rgba(75, 192, 192, 1)', 
     'rgba(153, 102, 255, 1)', 
     'rgba(255, 159, 64, 1)' 
     ], 
     borderWidth: 1 
    } 
    ]; 
} 

당신이 참조 할 수 있도록 완전히 컴파일 작업 프로젝트 소스 코드가 필요한 경우, 내 repo here

에서 그것을 얻을 그것이 도움이됩니다 바랍니다.