Ionic2フレームワークでのチャートの実装

Question

Ionic2フレームワークで応答性のあるチャート（好ましくは円グラフ）を実装する最も簡単な方法は何ですか？

Answer 1

答えを探しているなら、私はChartJs 2.0でサンプルイオン2プロジェクトを作成し、ホームページに円グラフを表示しました。あなたは

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

、その後home.html

に

としてグラフを描画するとしてあなた の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

からそれを得るが、それは助けていただければ幸いです。