angular – 如何导入highcharts-更多

发布时间：2020-12-17 07:50:35 所属栏目：安全来源：网络整理

导读：我想使用highcharts中的spiderweb图表,这需要我更多地导入highcharts,但我无法弄清楚如何做到这一点.目前,这是我从app.module.ts向我的项目添加highcharts的方式： import { ChartModule } from 'angular2-highcharts';import { HighchartsStatic } from 'an

我想使用highcharts中的spiderweb图表,这需要我更多地导入highcharts,但我无法弄清楚如何做到这一点.目前,这是我从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.

有任何想法吗？

您无需使用外部模块即可在Angular应用程序中使用highcharts或任何扩展程序包.所有你需要做的npm install –save highcharts highcharts-more然后在你的组件中以及其他导入包括：

// 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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!