angular2+highcharts+chart.js

這里是在ionic2下使用highchairs和chart.js的簡單示例
chartjs部分參考http://www.reibang.com/p/bc18132da812

1.安裝hightcharts

npm install highcharts --save
typings install dt~highcharts --global --save 

2.編輯

html文件
在html中添加一個(gè)div來顯示圖表

<ion-content class="about">
  <!--chart.js-->
  <canvas id="myChart" width="400" height="400"></canvas>
  <!--highchart-->
  <div #chart></div>
</ion-content>

ts文件

import {Component,ElementRef,AfterViewInit,OnDestroy,ViewChild} from '@angular/core';
import {NavController} from 'ionic-angular';
import * as CHartJs from 'chart.js'; //charts圖表
import * as Highcharts from 'highcharts' //highcharts圖表

@Component({
  templateUrl: 'build/pages/plus/plus.html',
})

export class PlusPage implements AfterViewInit, OnDestroy{
  constructor(private navCtrl:NavController){}

  @ViewChild('chart') public chartEl: ElementRef;  //highcharts

  private _chart: any; //highcharts

  //highcharts
  public ngAfterViewInit() {
    let opts: any = {
        title: {
            text: 'Monthly Average Temperature',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            name: 'Tokyo',
            data: [
                7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                26.5, 23.3, 18.3, 13.9, 9.6
            ]
        },
        {
            name: 'Tokyo1',
            data: [
                5.0, 6.9, 1.5, 14.5, 18.2, 21.5, 25.2,
                26.5, 11.3, 25.3, 127.9, 10.6
            ]
        }
        ]
    };
    if (this.chartEl && this.chartEl.nativeElement) {
        opts.chart = {
            type: 'line',
            renderTo: this.chartEl.nativeElement
         };
        this._chart = new Highcharts.Chart(opts);
    }
  }
  public ngOnDestroy() {
    this._chart.destroy();
  }

 //chart.js
  ionViewDidEnter(){
    var canvas = <HTMLCanvasElement> document.getElementById("myChart");
    var ctx = canvas.getContext('2d');
    CHartJs.Line(ctx,{
      data:{
        labels:["red","blue","yellow",'green',"purple","orange"],
        datasets:[{
          label:"# of Vote",
          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}
          }]
        }
      }
    });
  }
}

3.效果圖

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末如捅,一起剝皮案震驚了整個(gè)濱河市寺旺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌碎罚,老刑警劉巖泛啸,帶你破解...
    沈念sama閱讀 216,651評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異滨达,居然都是意外死亡盐肃,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門号枕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缰揪,“玉大人,你說我怎么就攤上這事葱淳《巯伲” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵赞厕,是天一觀的道長拍屑。 經(jīng)常有香客問我,道長坑傅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,218評(píng)論 1 292
  • 正文 為了忘掉前任喷斋,我火速辦了婚禮唁毒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘星爪。我一直安慰自己浆西,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評(píng)論 6 388
  • 文/花漫 我一把揭開白布顽腾。 她就那樣靜靜地躺著近零,像睡著了一般。 火紅的嫁衣襯著肌膚如雪抄肖。 梳的紋絲不亂的頭發(fā)上久信,一...
    開封第一講書人閱讀 51,198評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音漓摩,去河邊找鬼裙士。 笑死,一個(gè)胖子當(dāng)著我的面吹牛管毙,可吹牛的內(nèi)容都是我干的腿椎。 我是一名探鬼主播,決...
    沈念sama閱讀 40,084評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼夭咬,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼啃炸!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起卓舵,我...
    開封第一講書人閱讀 38,926評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤南用,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體训枢,經(jīng)...
    沈念sama閱讀 45,341評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡托修,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了恒界。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片睦刃。...
    茶點(diǎn)故事閱讀 39,731評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖十酣,靈堂內(nèi)的尸體忽然破棺而出涩拙,到底是詐尸還是另有隱情,我是刑警寧澤耸采,帶...
    沈念sama閱讀 35,430評(píng)論 5 343
  • 正文 年R本政府宣布兴泥,位于F島的核電站,受9級(jí)特大地震影響虾宇,放射性物質(zhì)發(fā)生泄漏搓彻。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評(píng)論 3 326
  • 文/蒙蒙 一嘱朽、第九天 我趴在偏房一處隱蔽的房頂上張望旭贬。 院中可真熱鬧,春花似錦搪泳、人聲如沸稀轨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽奋刽。三九已至,卻和暖如春艰赞,著一層夾襖步出監(jiān)牢的瞬間佣谐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評(píng)論 1 269
  • 我被黑心中介騙來泰國打工猖毫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留台谍,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,743評(píng)論 2 368
  • 正文 我出身青樓吁断,卻偏偏與公主長得像趁蕊,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子仔役,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容