[转] angular2+highcharts+chart.js

Posted 2020-09-30 散修

这里是在ionic2下使用highchairs和chart.js的简单示例
chartjs部分参考http://www.jianshu.com/p/bc18132da812

1.安装hightcharts

npm install highcharts --save
typings 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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。