ionic2實戰-使用Chart.js

前言

• Chart.js官網
• Chart.js中文文檔

安裝Chart.js

1. 執行cnpm install typings -g,全局安裝Typings

2. 執行typings search chart.js,使用Typings搜索Chart.js

   
   

   安裝和使用typings

3. 進入app目錄執行typings install chart.js --source npm

   
   

   app安裝chart.js
   
   

   執行typings install chart.js --source npm會生成的文件

4. 最後執行cnpm install chart.js安裝chart.js依賴

   
   

   安裝chart.js依賴
   
   

   執行cnpm install chart.js在node_modules目錄下生成的文件

使用Chart.js

個人contact.html完整代碼以下

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content> <div padding-vertical> <canvas #chartBar height="200"></canvas> </div> <div padding-vertical> <canvas #chartLine height="200"></canvas> </div> <div padding-vertical> <canvas #chartPie height="200"></canvas> </div> </ion-content>

個人contact.ts完整代碼以下

import {Component, ViewChild, ElementRef} from '@angular/core'; import {NavController} from 'ionic-angular'; import Chart from 'chart.js'; // 導入chart.js @Component({ selector: 'page-contact', templateUrl: 'contact.html' }) export class ContactPage { @ViewChild('chartBar') chartBar: ElementRef; @ViewChild('chartLine') chartLine: ElementRef; @ViewChild('chartPie') chartPie: ElementRef; constructor(private navCtrl: NavController) { } ionViewDidEnter() { Chart.Bar(this.chartBar.nativeElement.getContext("2d"), { data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '呵呵', 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 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); Chart.Line(this.chartLine.nativeElement.getContext("2d"), { data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "哈哈", fill: false, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(75,192,192,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(75,192,192,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [65, 59, 80, 81, 56, 55, 40], spanGaps: false, } ] } }); Chart.Doughnut(this.chartPie.nativeElement.getContext("2d"), { data: { labels: [ "Red", "Blue", "Yellow" ], datasets: [ { data: [300, 50, 100], backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ], hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ] }] } }); } }

效果展現

效果展現.gif

(轉發至簡書小軍)