하이 차트를 가져 오는 방법

Question

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. 

아이디어가 있으십니까?

Answer 1

가져 오기가 확실하지 않습니다. 제 생각에 도서관의 npm 페이지 (https://www.npmjs.com/package/highcharts-more)의 사용법에 따라 코드베이스에 <script> 태그를 사용하거나 scripts 배열의 경로를 .angular-cli.json에 추가하기 만하면됩니다.

Answer 2

앵귤러 앱에서 하이 차트 또는 확장 패키지를 사용하기 위해 외부 모듈을 사용할 필요가 없습니다. 당신이 다른 수입과 함께 구성 요소에 다음 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); 
} 

Answer 3

을

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