web-dev-qa-db-ja.com

ハイチャートをインポートする方法

ハイチャートからスパイダーウェブチャートを使用したいので、ハイチャートをさらにインポートする必要がありますが、その方法がわかりません。現在、これが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.

何か案は？

angularhighchartsangular2-highcharts
7
Jesper

Angularアプリでハイチャートまたは拡張パッケージを使用するために外部モジュールを使用する必要はありません。必要なことはすべて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);
}
28
Z. Bagley

highcharts-more npmパッケージは非推奨です-インストールする必要はありません。 highchartsがインストールされていることを確認してください。

解決：

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

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

プランカー

0
Deep 3015