无法使用 Ionic3/2 显示图表

Question

您好，我尝试使用 High 图表显示静态数据，但出现错误 13，我放置了这个

<div id="container" style="display: block;" ></div>

在 html 文件中，下面是我用来显示图表的数据

import * as HighCharts from 'highcharts';

ionViewDidLoad(){
    var myChart = HighCharts.chart('container', {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Fruit Consumption'
      },
      xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
        title: {
          text: 'Fruit eaten'
        }
      },
      series: [{
        name: 'Jane',
        data: [1, 0, 4]
      }, {
        name: 'John',
        data: [5, 7, 3]
      }]
    });
  }

有没有更好的 ionic 图表库来显示 chart.js 以外的图表

Answer 1

有一个名为 angular2-highcharts

的 angular2 包

import { ChartModule } from 'angular2-highcharts';

和选项，

class AppComponent {
    constructor() {

        this.options = {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        };
    }
    options: Object;
}

DEMO

Answer 2

查看官方highcharts#typescript

stackblitz演示

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import  Highcharts from 'highcharts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage{
 @ViewChild("container", { read: ElementRef }) container: ElementRef;
  constructor(public navCtrl: NavController) {

  }
  ionViewDidLoad() {
    Highcharts.chart(this.container.nativeElement, {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Fruit Consumption'
      },
      xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
        title: {
          text: 'Fruit eaten'
        }
      },
      series: [{
        name: 'Jane',
        data: [1, 0, 4]
      }, {
        name: 'John',
        data: [5, 7, 3]
      }]
    })
  }

}