如何导入highcharts-more

Question

我想使用 highcharts 的蜘蛛网图表，这需要我导入 highcharts-more，但我不知道该怎么做。目前，这就是我将 highcharts 添加到我的项目中的方式，来自 app.module.ts：

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as Highcharts from 'highcharts/highstock';

imports: [
    ChartModule
]

providers: [{
    provide: HighchartsStatic,
    useValue: Highcharts
}],

当我尝试像这样导入它时：

import * as HighchartsMore from 'highcharts/highcharts-more';

我收到以下错误：

Module '"c:/pdws-view-v2/node_modules/@types/highcharts/highcharts-more"' resolves to a non-module entity and cannot be imported using this construct.

有什么想法吗？

Answer 1

您不需要使用外部模块来使用 highcharts 或 Angular 应用中的任何扩展包。您需要做的所有事情 npm install --save highcharts 然后在您的组件中连同其他导入包括：

// HIGHCHARTS
import * as Highcharts from 'highcharts';
declare var require: any;
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
require('highcharts/modules/heatmap')(Highcharts);
require('highcharts/modules/treemap')(Highcharts);
require('highcharts/modules/funnel')(Highcharts);
let chartHolder;

和用法示例：

ngOnInit() {
  chartHolder = Highcharts.chart('container', newOptions);
}

您可以更新图表选项：

updateChart(newOptions) {
  chartHolder.update(newOptions);
}

Answer 2

使用 add-highcharts-modules 并且我已将其更新为蜘蛛图

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: {
        polar: true,
        type: 'line'
    },

    title: {
        text: 'Budget vs spending',
        x: -80
    },

    pane: {
        size: window.innerWidth * .80
    },

    xAxis: {
        categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
                'Information Technology', 'Administration'],
        tickmarkPlacement: 'on',
        lineWidth: 0
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0
    },

    tooltip: {
        shared: true,
        pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
    },

    legend: {
        align: 'right',
        verticalAlign: 'top',
        y: 70,
        layout: 'vertical'
    },

    series: [{
        name: 'Allocated Budget',
        data: [43000, 19000, 60000, 35000, 17000, 10000],
        pointPlacement: 'on'
    }, {
        name: 'Actual Spending',
        data: [50000, 39000, 42000, 31000, 26000, 14000],
        pointPlacement: 'on'
    }]



         };
    };
    options: Object;
}

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


platformBrowserDynamic().bootstrapModule(AppModule);

Plunker

Answer 3

highcharts-more npm 包已弃用 - 无需安装它。只需确保已安装 highcharts。

解决方案：

import * as Highcharts from 'highcharts';
import more from 'highcharts/highcharts-more';
more(Highcharts);

如何导入highcharts-more

How to import highcharts-more

highcharts

angular2-highcharts

angular

解决方案：