onic的官网放出一记大招Ionic and Typings，来介绍如何在Ionic2项目中使用第三方JavaScript库。
因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东西，但我们的项目框架使用的是Ionic2,并且使用的是TypeScript来做开发语言的，所以当时想了很多的办法也没有很好地集成进来，最后还是使用了一个开源库ng2-charts来实现的。
看了Ionic and Typings的教程，来总结一下方法吧，其实特别简单啦，如下
npm install -g typingstypings search loadstypings 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 2NAMESOURCE HOMEPAGE DESCRIPTION VERSIONS UPDATEDchart.js npm /package/chart.js 1 -06-15T17:49:20.000Zchart dt /nnnick/Chart.js 1 -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! 大功告成~ 运行一下项目看一下喽~
