作者:天天宅家里变胖的小黑 | 来源:互联网 | 2023-01-10 11:10
我想使用highcharts中的spiderweb图表,这需要我更多地导入highcharts,但我无法弄清楚如何做到这一点.目前,这就是我将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.
有任何想法吗?
1> Z. Bagley..:
您无需使用外部模块即可在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);
}
_declare var require:any_这太可怕了 - 但它对我有用.非常感谢
2> Wojciech K..:
该highcharts-more
NPM包已被弃用-有没有需要安装它。只要确保highcharts
已安装。
解:
import * as Highcharts from 'highcharts';
import more from 'highcharts/highcharts-more';
more(Highcharts);
这解决了我在highcharts-vue中使用arearange系列的问题。谢谢!