ionic2 使用Highcharts-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

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);
    }
  }

转载于:https://my.oschina.net/u/2365397/blog/895625