ionic2 使用Highcharts

1.highchart環境配置

在終端只輸入如下命令便可，親測的

npm install highcharts

下面這個是網上的方法，我沒試過

1.1 

     npm install highcharts --save

1.2.1 安裝typings (安裝的話跳過此步驟）

     npm install --g typings

1.2.2

     typings install dt~highcharts --global --save

2.項目中使用

2.1 在.html中

<div #chart class="chart-wrapper"></div>

2.2 在.scss(給定位置寬高）

.chart-wrapper {
      //display: flex;
      //flex-direction: column;
      //width: 100%;
      //height: 100%;

      flex: 1;
    }

2.3 在.ts

2.3.1 首先引入頭文件

import { ViewChild, ElementRef  } from '@angular/core';
import * as Highcharts from 'highcharts';

2.3.2  在page中定義chart

export class **Page {
  @ViewChild('chart') public chart: ElementRef;
}

2.3.3 繪圖

drawChart(data) {
    let opts: any = {
      legend: {
        enabled: false
      },
      title: {
        text: null
      },
      tooltip: {
        enabled: false
      },
      credits: {
        enabled: false // 禁用版權信息
      },
      plotOptions: {
        series: {
          shadow: false,
          borderWidth: 0,
          enableMouseTracking: false,
          states: {
            hover: { enabled: false }
          },
          lineWidth: 1,
          marker: {
            enabled: true
          },
          events: {
            legendItemClick: function () {
              return false;
            }
          }
        }
      }
    };
    opts.xAxis = {
      categories: data.x
    }
    opts.yAxis = {
      title: {
        text: null
      }
    }
    opts.legend = {
      layout: 'horizontal',
      verticalAlign: 'top'
    }
    opts.series = [{
      name: 'series1',
      data: data.series1,
      color: "#28c91c",
      marker: {
        enabled: false
      }
    }, {
      name: 'series2',
      data: data.series2,
      color: "#cadbe3",
      marker: {
        enabled: false
      }
    }]

    if (this.chart && this.chart.nativeElement) {
      opts.chart = {
        renderTo: this.chart.nativeElement,
        type: 'column'
      }
      Highcharts.chart(opts);
    }
  }