まず moment.js、Chart.js、chartjs-plugin-streaming.js をページに含める必要があります。
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="chartjs-plugin-streaming.js"></script>
ページに Canvas を設置します。
<canvas id="myChart"></canvas>
これでチャートを作成することができます。スクリプトをページに追加します。
今のところはデフォルト設定を使います。これは後で変更することが可能です。
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: []
}, {
data: []
}]
},
options: {
scales: {
xAxes: [{
type: 'realtime'
}]
}
}
});
定期的に呼び出される onRefresh コールバック関数でデータを追加することができます。
各データは 2 つのプロパティ(データポイントのタイムスタンプと値)を持ちます。
...
options: {
scales: {
xAxes: [{
...
realtime: {
onRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
}
}
...
なお、古いデータはチャートから見えなくなると自動的に削除されます。
上のチャートには少し問題があります。次のデータポイントが得られない限り、
線をプロットすることができません。これを回避するために、チャートに遅延を追加して
線をプロットする時点で次の値が得られているようにします。
このようにして、右端で飛び飛びの挙動をすることなく
途切れずに流れるようなチャートを作ることができます。
...
options: {
scales: {
xAxes: [{
...
realtime: {
...
delay: 2000
...
目盛り、ツールチップ、ラベル、色、カスタムアクションなど、Chart.js が提供する
たくさんの設定オプションは、チャートをカスタマイズするのに役立ちます。
詳細は Chart.js のドキュメントやサンプルをご覧ください。
...
data: {
datasets: [{
...
label: 'Dataset 1',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
lineTension: 0,
borderDash: [8, 4]
}, {
...
label: 'Dataset 2',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
...
GitHub リポジトリとサンプルもご覧ください。
Angular CLI をインストールし、angular-streaming-chart というプロジェクトを作成します。
そして、プロジェクトディレクトリに移動し、アプリケーションを起動します。
ブラウザ上の http://localhost:4200/ にてアプリが動作しているはずです。
$npm install -g @angular/cli
$ng new angular-streaming-chart
$cd angular-streaming-chart
$ng serve --open
ng2-charts および chartjs-plugin-streaming をプロジェクトにインストールします。
$npm install ng2-charts@2 chartjs-plugin-streaming@1 --save
ng2-chart の ChartsModule を app モジュールにインポートします。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ng2-charts では HTML Canvas 要素で baseChart ディレクティブを使用することができます。
下記の例では、いくつかのオプションを入力として渡しています。
<div>
<canvas
baseChart
[chartType]="'line'"
[datasets]="datasets"
[options]="options">
</canvas>
</div>
そして、コンポーネントクラスはこのようになります。chartjs-plugin-streaming
をインポートして、realtime スケールを持つチャートを作成します。
import { Component } from '@angular/core';
import 'chartjs-plugin-streaming';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
datasets: any[] = [{
data: []
}, {
data: []
}];
options: any = {
scales: {
xAxes: [{
type: 'realtime'
}]
}
};
}
コールバック関数でデータを追加し、様々なチャートオプションを指定することができます。
ブラウザは自動更新され、ストリーミングチャートが表示されます。
カスタマイズのオプションについては Chart.js のドキュメントやサンプル、
ng2-charts のドキュメントをご覧ください。
...
export class AppComponent {
datasets: any[] = [{
...
label: 'Dataset 1',
lineTension: 0,
borderDash: [8, 4]
}, {
...
label: 'Dataset 2'
}];
options: any = {
scales: {
xAxes: [{
...
realtime: {
onRefresh: function(chart: any) {
chart.data.datasets.forEach(function(dataset: any) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
},
delay: 2000
}
}]
}
};
}
GitHub リポジトリとサンプルもご覧ください。
Create React App をインストールし、react-streaming-chart というプロジェクトを作成します。
そして、プロジェクトディレクトリに移動し、アプリケーションを起動します。
ブラウザ上の http://localhost:3000/ にてアプリが動作しているはずです。
$npm install -g create-react-app
$create-react-app react-streaming-chart
$cd react-streaming-chart
$npm start --open
Chart.js、react-chartjs-2 および chartjs-plugin-streaming をプロジェクトにインストールします。
$npm install chart.js@2 react-chartjs-2@2 chartjs-plugin-streaming@1 --save
realtime スケールを持つチャートコンポーネントを作成します。
react-chartjs-2 の Line チャートコンポーネント、chartjs-plugin-streaming
をインポートして拡張します。
import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';
import './App.css';
class App extends Component {
render() {
return (
<Line
data={{
datasets: [{
data: []
}, {
data: []
}]
}}
options={{
scales: {
xAxes: [{
type: 'realtime'
}]
}
}}
/>
);
}
}
export default App;
コールバック関数でデータを追加し、様々なチャートオプションを指定することができます。
ブラウザは自動更新され、ストリーミングチャートが表示されます。
カスタマイズのオプションについては Chart.js のドキュメントやサンプル、
react-chartjs-2 のドキュメントをご覧ください。
...
<Line
data={{
datasets: [{
...
label: 'Dataset 1',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
lineTension: 0,
borderDash: [8, 4]
}, {
...
label: 'Dataset 2',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
}}
options={{
scales: {
xAxes: [{
...
realtime: {
onRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
},
delay: 2000
}
}]
}
}}
/>
...
GitHub リポジトリとサンプルもご覧ください。
Vue CLI をインストールし、vue-streaming-chart というプロジェクトを作成します。
そして、プロジェクトディレクトリに移動し、アプリケーションを起動します。
ブラウザ上の http://localhost:8080/ にてアプリが動作しているはずです。
$npm install -g @vue/cli
$vue create --default vue-streaming-chart
$cd vue-streaming-chart
$npm run serve
Chart.js、vue-chartjs および chartjs-plugin-streaming をプロジェクトにインストールします。
$npm install chart.js@2 vue-chartjs@3 chartjs-plugin-streaming@1 --save
まず、メインとなるトップレベルのコンポーネントから見ていきます。
Vue CLI が生成したメインコンポーネントが src/App.vue に置かれています。
ここでは、この後で作成する MyChart コンポーネントをインポートします。
<template>
<div id="app">
<MyChart />
</div>
</template>
<script>
import MyChart from './components/MyChart.vue'
export default {
name: 'app',
components: {
MyChart
}
}
</script>
realtime スケールを持つ MyChart という名前のチャートコンポーネントを作成します。
vue-chartjs の Line チャートコンポーネント、chartjs-plugin-streaming
をインポートして拡張します。
<script>
import { Line } from 'vue-chartjs'
import 'chartjs-plugin-streaming';
export default {
extends: Line,
mounted () {
this.renderChart({
datasets: [{
data: []
}, {
data: []
}]
}, {
scales: {
xAxes: [{
type: 'realtime'
}]
}
});
}
}
</script>
コールバック関数でデータを追加し、様々なチャートオプションを指定することができます。
ブラウザは自動更新され、ストリーミングチャートが表示されます。
カスタマイズのオプションについては Chart.js のドキュメントやサンプル、
vue-chartjs のドキュメントをご覧ください。
...
this.renderChart({
datasets: [{
...
label: 'Dataset 1',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
lineTension: 0,
borderDash: [8, 4]
}, {
...
label: 'Dataset 2',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
}, {
scales: {
xAxes: [{
...
realtime: {
onRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
},
delay: 2000
}
}]
}
});
...
GitHub リポジトリとサンプルもご覧ください。