Ionic2之顯示圖表(chart)曲線dygraph(angularjs2使用第三方js庫)

Ionic2之顯示圖表(chart)曲線dygraph(angularjs2使用第三方js庫)

在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" 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" 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 在瀏覽器效果如下: