javascript - 如何在 Ionic 上使用 Highcharts？

Question

我不明白如何在 Ionic 上使用 Highcharts。

• ionic 版本 3.4.0
• Highcharts 版本 5.0.12

遵循 installation 的 Highcharts 指南, 包含在我的 file.ts 中

import highchart from 'highcharts/highcharts.js';

var Highcharts = require('highcharts');
require('highcharts/modules/exporting')(Highcharts);

然后 Ionic 服务器给我错误

Cannot find name 'require'

Answer 1

你需要在顶部添加:

declare var require: any;

一般来说，我建议你安装 highcharts 模块而不是使用 npm install angular2-highcharts:

$ npm install highcharts --save 

然后你可以像这样声明 Highcharts:

declare var require: any;
let hcharts = require('highcharts');
require('highcharts/modules/exporting')(hcharts);

这是一个完整的例子:

import { ElementRef, Component} from '@angular/core';
import { NavController } from 'ionic/angular';

declare var require: any;
let hcharts = require('highcharts');
require('highcharts/modules/exporting')(hcharts);


@Component({
    selector: 'page-about',
    template: `<div #myChart></div>`,
})
export class AboutPage {
    @ViewChild('myChart') canvas: ElementRef;

    constructor(public navCtrl: NavController) {}

    ionViewDidLoad() {
        let chart = hcharts.chart(this.canvas.nativeElement, {
            chart: {
                zoomType: 'x',
                events: {
                    load: function() {
                        let self = this;
                        setTimeout(function(){
                            self.reflow();
                        }, 100);
                    }
                }
            },
            series: [{
                data: [1, 3, 2, 4]
            }],
        });
    }
}