如何在Ionic2項目中使用第三方JavaScript庫

Ionic的官網放出一記大招Ionic and Typings，來介紹如何在Ionic2項目中使用第三方JavaScript庫。

因為在前陣子正好想用一個非常有名的第三方JS庫ChartJs來實現一些東西，但我們的項目框架使用的是Ionic2,並且使用的是TypeScript來做開發語言的，所以當時想了很多的辦法也沒有很好地集成進來，最后還是使用了一個開源庫ng2-charts來實現的。

看了Ionic and Typings的教程，來總結一下方法吧，其實特別簡單啦，如下

 

npm install -g typings
typings search loads
typings install lodash --save

　　

以上是教程中使用lodash的方法，現在我們來看一下，如果我想在自己的Ionic2項目中使用ChartJs的步驟吧。

1, 安裝ChartJs庫

cd /項目的根目錄下
npm install chart.js --save

2, 全局安裝typings

npm install -g typings

3, 咱們也搜一下有多少個chart.js的源啦

typings search chart.js

Viewing 2 of 2

NAME     SOURCE HOMEPAGE                               DESCRIPTION VERSIONS UPDATED
chart.js npm    https://www.npmjs.com/package/chart.js             1        2016-06-15T17:49:20.000Z
chart    dt     https://github.com/nnnick/Chart.js                 1        2016-03-16T15:55:26.000Z

4, 不錯，有兩個源，安裝chart.js，這個看起來比較新

typings install chart.js --save

基本的環境配置到這里搞定了

接下來看一下如何在項目中使用
1, 參考ChartJS的官網，在xxx.html創建一個Chart.

<ion-content padding class="about">  
    <canvas id="myChart" width="400" height="400"></canvas> 
</ion-content>

2, 在xxx.ts中引用Chart，並創建數據。如下

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import * as ChartJs from 'chart.js'; // 導入chart.js
@Component({
    templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
    constructor(private navController:NavController) {

    }

    ionViewDidEnter() {
        var canvas = <HTMLCanvasElement> document.getElementById("myChart");
        var ctx = canvas.getContext("2d");  // 這里是關鍵, 不能寫在constructor()中
        ChartJs.Line(ctx,{
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    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
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        })
    }
}

OK! 大功告成~ 運行一下項目看一下嘍~

參考

Ionic and Typings
TypeScript: problems with type system

 

 

文／思小言（簡書作者）
原文鏈接：http://www.jianshu.com/p/5f603f593917
著作權歸作者所有，轉載請聯系作者獲得授權，並標注“簡書作者”。