如何导入Highcharts-More

Question

我想使用Highcharts的蜘蛛网图，但需要导入highcharts-more，但我不知道如何操作。目前我是从app.module.ts中添加Highcharts到我的项目中的：

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.

有什么想法吗？

- Jesper

---

在这里，您可以找到使用angular2-highcharts的蜘蛛网示例：http://plnkr.co/edit/ZdFJc2Wul4yOGNoGwX4f?p=preview。 - pawel_d

Answer 1

您不需要使用外部模块来在Angular应用程序中使用highcharts或任何扩展包。您只需要执行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);
}

- Z. Bagley

---

声明变量 require: any。虽然很糟糕，但对我有用。非常感谢。 - Simon H

在浏览器中出现错误“require未定义”。我正在使用Angular版本13和TS版本4.6.4。 - Animesh Rawat

Answer 2

highcharts-more npm包已经被弃用 - 没有必要安装它。只需确保安装了highcharts。

解决方案：

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

- Wojciech K

---

这个使用arearange系列的高级图表解决了我的问题。谢谢！ - dsaves

开箱即用，无需任何技巧，这应该是被接受的答案。 - FuzzyTemper

谢谢，这对我有用。我现在能够创建箱线图了。 - Akash Patel

Answer 3

使用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);

{{链接1：Plunker}}

- Deep 3015