angular2-highcharts 実装することもできます。
この質問は少し古くなっていますが、angular2 + highchartsクエリの最初のヒットの1つです。 https://plnkr.co/edit/8ccBrP?p=preview のプランカーの例を次に示します。
主なロジックは次のとおりです。
import {
Component,
ElementRef,
AfterViewInit,
OnDestroy,
ViewChild
} from '@angular/core';
const Highcharts = require('highcharts/highcharts.src');
import 'highcharts/adapters/standalone-framework.src';
@Component({
selector: 'my-app',
template: `
<div>
<div #chart></div>
</div>
`
})
export class AppComponent implements AfterViewInit, OnDestroy {
@ViewChild('chart') public chartEl: ElementRef;
private _chart: any;
public ngAfterViewInit() {
let opts: any = {
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Tokyo',
data: [
7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6
]
}]
};
if (this.chartEl && this.chartEl.nativeElement) {
opts.chart = {
type: 'line',
renderTo: this.chartEl.nativeElement
};
this._chart = new Highcharts.Chart(opts);
}
}
public ngOnDestroy() {
this._chart.destroy();
}
}
Ng2-highchart（ https://github.com/Bigous/ng2-highcharts ）を試すことができると思います。
使用例については、このプロジェクトを参照してください： https://github.com/Bigous/angular2-seed-ng2-highcharts 。
SystemJS構成での設定方法： https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/index.html#L4 および https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/tools/config.ts#L108
<script> System.config({ map: { 'ng2-highchart': 'node_modules/ng2-highchart' }, (...) }); </script>コンポーネント内で構成する方法： https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/home/components/home.ts#L1
import {Component, OnInit} from 'angular2/core'; import {Http} from 'angular2/http'; import {Ng2Highcharts, Ng2Highmaps, Ng2Highstocks} from 'ng2-highcharts/ng2-highcharts'; @Component({ selector: 'home', moduleId: module.id, templateUrl: './home.html', styleUrls: ['./home.css'], directives: [Ng2Highcharts, Ng2Highmaps, Ng2Highstocks] }) export class HomeCmp implements OnInit { (...) }コンポーネントテンプレート内での使用方法： https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/home/components/home.html#L9
<div [ng2-highcharts]="chartOptions" class="graph"></div>
このライブラリをインストールするには、最初にピアの依存関係をインストールします。
$ npm install --save highcharts@^4.2.1
また、Highchartsのタイピングを必ずインストールしてください。
$ npm install @types/highcharts --save
次に、このライブラリを実行してインストールします。
$ npm install --save ng2-highcharts
app.module
import { Ng2HighchartsModule } from 'ng2-highcharts';
add Ng2HighchartsModule to @NgModule => imports
角型cliこのJSファイルをスクリプトに追加します
"../node_modules/highcharts/highcharts.js",
"../node_modules/highcharts/highcharts-more.js",
"../node_modules/highcharts/modules/exporting.js"
コンポーネントファイル
import { Ng2Highcharts } from 'ng2-highcharts';
private chartData = {
chart: {
type: 'column'
},
xAxis: {
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
series: [
{
name: 'NC',
data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
}, {
name: 'OK',
data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
}, {
name: 'KO',
data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
}, {
name: 'VALID',
data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
}, {
name: 'CHECK',
data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
}, {
name: 'COR',
data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
}
]};
そして、HTML
<div [ng2-highcharts]="chartData"></div>
これをpackage.jsonに追加しました：
"angular2-highcharts": "^0.3.3",
"highcharts": "^5.0.0",
これをmain.module.tsファイルに追加しました：
import { ChartModule } from 'angular2-highcharts';
これをmain.module.tsの@NgModule importsセクションに追加しました
imports: [ // import Angular's modules
ChartModule
],
これをvendor.tsファイルに追加しました。
//Angular2-highcharts
import { Highcharts } from 'angular2-highcharts';
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
これをchart.component.tsファイルに追加しました
import { Highcharts } from 'angular2-highcharts';
これをchart.componentクラスコード内で宣言します。
options: HighchartsOptions;
chartData: any = [];
データをチャートにバインドするメソッドに次のコードを追加します。
this.options = {
chart: { type: 'spline' },
title : { text : 'chart' },
xAxis: {
type: 'datetime'
},
series: [{
name: "name",
data: this.chartData
}]
};
これをchart.component.htmlページに追加しました：
<div>
<chart [options]="options"></chart>
</div>
サードパーティのライブラリを必要とせずにこのアプローチを試してください。
import {Component} from 'angular2/core';
declare var jQuery:any;
@Component({
selector: 'my-chart',
template: `<div style="width:60%" id="container"></div>`
})
export class AppComponent {
private data = [
{
name: 'USA',
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
},
{
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}];
ngAfterViewInit() {
this.renderChart();
}
renderChart(){
jQuery('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: thebulletin.metapress.com'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b>' +
'<br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: this.data
});
}
}
これをindex.htmlに書き留めます
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
または、ポイント選択イベントを処理する必要がある場合は、このモジュール http://ngmodules.org/modules/angular2-highcharts を試してください。
まだテストしていませんが、HighChartsには公式の Angular library があり、積極的にメンテナンスされているようです。
PrimeNGチャートは代わりになる可能性があります。 http://www.primefaces.org/primeng/
2018年10月現在：
angular-highcharts はブロックの新しい子供であり、 angular2-highcharts を追い越しました。
angle-highchartsはAngularディレクティブベースのhighchartsとATTOWの実装が必要ですAngular 7（ごく最近リリースされました）
私はどちらの図書館にも所属していません。
公式のハイチャートモジュールのみを使用する場合（angular2-highcharts以外、および@ types/highchartsさえも）
npm install --save-dev highcharts
import * as HC from 'highcharts';
...
export class MainComponent implements OnInit, AfterViewInit {
...
ngAfterViewInit() {
let chartOptions = {
...
chart: {
renderTo: 'chartPanel', // need to have div #chartPanel in template
...
}
}
this.chartInstance = new HC.Chart(chartOptions);
}
this.chartInstanceには、addSeries、reflow、redrawなどのすべてのハイチャートメソッドが含まれます。