13

我想使用来自 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.

有任何想法吗？

4

4 回答 4

32

您无需使用外部模块即可在 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);
}
于 2017-11-05T00:44:43.223 回答
27

不推荐使用highcharts-morenpm 包 - 无需安装它。只要确保highcharts已安装。

解决方案：

import * as Highcharts from 'highcharts';
import more from 'highcharts/highcharts-more';
more(Highcharts);
于 2019-06-25T12:19:54.673 回答
0

[1]：卸载你的high chart包并按照以下步骤操作

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

于 2022-01-28T12:20:09.657 回答
-1

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

普朗克

于 2017-12-16T12:54:46.177 回答