[轉] angular2+highcharts+chart.js

來源:互聯網
上載者:User

標籤:package   esc   lan   init   contex   element   cto   ogr   javascrip   

這裡是在ionic2下使用highchairs和chart.js的簡單樣本
chartjs部分參考http://www.jianshu.com/p/bc18132da812

1.安裝hightcharts
npm install highcharts --savetypings install dt~highcharts --global --save
2.編輯

html檔案
在html中添加一個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.

Nico_zhang
連結:http://www.jianshu.com/p/e187c27e257e
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。

[轉] angular2+highcharts+chart.js

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.