如何导入highcharts更多信息

Question

我想使用highcharts中的spiderweb图表，这需要我导入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.

有什么想法吗？

Answer 1

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

解决方案：

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

Answer 2

在你的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);
}

Answer 3

1:卸载high图表包并执行以下步骤

➡https://github.com/highcharts/highcharts-angular#installing