Question

我正在使用 angular 4（4.4.4），“highcharts”：“〜6.0.1”，“angular2-highcharts”：“~0.5.5”。

它显示简单的图表，但显示以下错误显示仪表

作为其他帖子的建议，我在appmodule.ts中有以下代码

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

declare var require : any;

export function highchartsFactory() {
  const highcharts = require('highcharts');
  const highChartsMore = require('highcharts/highcharts-more');
  const solidGauge = require('highcharts/modules/solid-gauge');
  ChartModule.forRoot(require('highcharts'),
        require('highcharts/highcharts-more'),
        require('highcharts/modules/solid-gauge'));
  return highcharts;
}

有什么想法吗？感谢

Answer 1

包括仪表图表所需的额外模块

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component }    from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { ChartModule }            from 'angular2-highcharts'; 
@Component({
  selector: 'my-app',
  styles: [`
      chart {
        display: block;
      }
    `],
  template: `<chart [options]="options"></chart>`
})
class AppComponent {
  constructor() {
    this.options = {
      chart: {
        type: 'solidgauge'
      },
      title: null,
      pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {

          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
        }
      },
      tooltip: {
        enabled: false
      },
      // the value axis
      yAxis: {
        stops: [
          [0.1, '#55BF3B'], // green
          [0.5, '#DDDF0D'], // yellow
          [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
          y: -70
        },
        labels: {
          y: 16
        },
        min: 0,
        max: 200,
        title: {
          text: 'Speed'
        }
      },
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: 5,
            borderWidth: 0,
            useHTML: true
          }
        }
      },
      credits: {
        enabled: false
      },

      series: [{
        name: 'Speed',
        data: [80],
        tooltip: {
          valueSuffix: ' km/h'
        }
      }]
    };
  }
  options: Object;
}

@NgModule({
  imports: [
    BrowserModule,
    ChartModule.forRoot(
      require('highcharts'),
      require('highcharts/modules/exporting'),
      require('highcharts/highcharts-more'),
      require('highcharts/modules/solid-gauge')
    )
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
class AppModule {}


platformBrowserDynamic().bootstrapModule(AppModule);

Plunker演示

Answer 2

Install highcharts-more 

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import * as ChartModuleMore from 'highcharts-more'; 
ChartModuleMore(Highcharts);

Angular 4使用highcharts gauge

2 个答案: