这里是在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.效果图