如何导入highcharts-更多

Posted 2021-05-05

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

有任何想法吗？

答案

您无需使用外部模块即可在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);
}

另一答案

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

Plunker

另一答案

不确定你应该导入它。在我看来，基于库的npm页面（https://www.npmjs.com/package/highcharts-more）中的用法，您只需将其包含在代码库中，使用<script>标记，或者将其路径添加到scripts中的.angular-cli.json数组中。