在ionic2開發中，發現這個ionic還不夠普及，使用中得探索。今天這個例子是在ionic2中使用圖表。由于ionic的庫裡沒有圖表庫，就和Android原生一樣，都得使用第三方庫。
本來在前端，就有好多js圖表庫可以用。是以現在要在angular2上使用第三方庫。（ionic2使用angular2開發）。隻是，這方面例子少。是以寫這篇文章。
一、Angular2使用第三方js插件。
這裡參考了文章：https://segmentfault.com/a/1190000005990632
文中提到的方法是：
1. 下載下傳js庫。
2. 在index.html檔案的head裡引入庫
3. 在邏輯端，聲明這個庫在其他地方已經導入（即index.html檔案）
declare var Dygraph:any;//聲明為外部定義此庫。
文章中提到了另一種方式在ionic2工程中我沒有成功。接下來就關于導入dygraph.js庫作為示例。
在index.html裡的<head></head>标簽裡加入如下。
<!-- dygraph -->
<script src="dygraphs/dygraph.js"></script>
<link href="dygraphs/dygraph.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet">
其中，所指定的檔案可以到官網下載下傳。
http://dygraphs.com/download.html
二、使用gygraph方法思路來源
思路：在ionic2裡面即angular2，我們要使用一個component來封裝一下這個dygraph庫，然後再調用這個component來使用。（基本思路）
得出這個思路我參考了以下文章：
1.在ionic1即angular1裡使用gygraph插件的方法，這個作者實作了一個directive用于打包dygraph.js的庫。位址如下：
https://github.com/robotnic/angular-dygraphs
2.在angular2裡定義component元件，位址如下：
http://stackoverflow.com/questions/37412398/creating-angular2-component-directive-wrapper-for-dygraphs?answertab=active#tab-top
3. 另一個圖表插件的 directive實作，用于ionic1
http://blog.sina.com.cn/s/blog_78a4978e0102wsh7.html
三、編寫封裝了dygraph的component元件以及使用
首先聲明我使用的程式設計環境及模闆：我使用了ionic2的slidmenu模闆。打算在page4頁面顯示一個圖表。
第一步：引入js插件
在index.html裡的<head></head>标簽裡加入如下。
<!-- dygraph -->
<script src="dygraphs/dygraph.js"></script>
<link href="dygraphs/dygraph.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet">
第二步:定義元件
修改補充：
這裡可以不用再index.html 裡引入js庫檔案，可用通過以下方法引入檔案：
npm install dygraphs 安裝完成後，說明文檔裡會有調用 方法，，其方法如下：（兩種）
import Dygraph from 'dygraphs';
// or: const Dygraph = require('dygraphs');
在page4的檔案夾下建立一個檔案為：mydygraph.ts作為包含dygraph的元件。
在mydygraph.ts檔案裡寫如下内容：
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
declare var Dygraph:any;//聲明為外部定義此庫（使用以下的導入，方法，則屏蔽此行，并取消index.html導入的js庫檔案）
import Dygraph from 'dygraphs';//建議使用這種簡單的方法
//import { Dygraph } from 'dygraphs'; //經過測試，這個方法不可用
@Component ({
selector: 'my-dygraph',
template:`
<div>
<p>zhang san</p>
<div #graph></div>
</div>
`
})
export class DygraphComponent implements AfterViewInit {
@ViewChild('graph')
elt:ElementRef;
@Input()
title:string;
ngAfterViewInit() {
new Dygraph(this.elt.nativeElement, [
[1,10,100],
[2,20,80],
[3,50,60],
[4,70,80]
],
{
labels: [ "x", "A", "B" ]
});
}
}
這樣一個包含dygraph的component就完成了，内容解釋如下：
（1） Selector：‘my-dygraph’；的意義是定義了一個标簽，這個标簽就代表了這個元件（component），要在頁面裡使用這個元件，隻需要在需要的位置包含這個标簽就可以。調用的标簽寫為：<my-dygraph></my-dygraph>。
（2） Template：定義了元件的模闆。，及元件内的顯示元素。我們在這裡定義了dygraph需要使用的标簽：<div#graph></div>
（3） 在ngAfterViewInit（）函數裡面使用dygraph定義，以及傳遞資料。
最後關于dygraph本來的使用方法，參考：http://dygraphs.com/tutorial.html
第三步：聲明元件
在angular2裡面，定義的元件需要在module裡面聲明才可以被認識。聲明方法：
在app目錄下的app.module.ts檔案裡面添加如下内容：
導入：
import { DygraphComponent } from '../pages/page4/mydygraph';
聲明：在declarations裡面增加 DygraphComponent，結果如下。
declarations: [
MyApp,
Page1,
Page2,
Page3,
Page4,
DygraphComponent
],
第四步：使用元件
在page4.html檔案裡的<ion-content>标簽内加入如下内容：
<div>
<my-dygraph></my-dygraph>
</div>
第五步：檢視效果
執行指令：ionic serve 在浏覽器效果如下：
![WPF程式設計，Live Charts使用說明（47）——對數軸背景：前台：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)