Posted at

Chart.jsで高低線

More than 1 year has passed since last update.


Chart.jsで高低線


Chart.js

Chart.jsは他のライブラリに依存しないシンプルなグラフ描画用JavaScriptライブラリ。

http://www.chartjs.org/


高低線

2つの折れ線グラフがあるとき、同じx座標のy値間を直線で結ぶ。

Chart.jsにはこの機能がないので、プラグインを作ってみた。


プラグイン

Chart.jsのプラグインの作法に従っているか怪しいが、とりあえず動く。

https://github.com/hority/chartjs-plugin-highlow


使い方

Chart.js自体の使い方は割愛。

こんな値があって

var graphData = {

labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
datasets: [{
data: [undefined, 90, 91, 92, 90, 92, 93, 91, 91, 92, 90, 93, 85, 91, 90, 91, 90, 92, 93, 91, 87],
fill: false,
pointRadius: 0,
label: 'low',
borderColor: 'green'
}, {
data: [undefined, 130, 132, 127, 131, 130, 133, 131, 130, 128, 130, 131, 130, 131, 135, 120, 130, 132, 133, 131, 130],
fill: false,
pointRadius: 0,
label: 'high',
borderColor: 'red'
}]
};

これらを折れ線グラフで表示して、さらに高低線を描画させたいとき、

chartjs-plugin-highlow.jsを読み込んで以下のようにhighlowオプションを指定する。

var ctx = document.getElementById("canvas").getContext("2d");

var myBar = new Chart(ctx, {
type: 'line',
data: graphData,
options: {
highlow: {
high: 0, // high側に使うデータのindex
low: 1, // low側に使うデータのindex
onDrawLine: function (ctx, p0, p1, highlow) {
// functionを指定すると、高低線p0,p1を1本書く度に呼ばれる
// ここでは、高低線の両端に矢印マークを書き加えてみる
ctx.beginPath();
ctx.moveTo(p0.x, p0.y);
ctx.lineTo(p0.x - 3, p0.y + 5);
ctx.moveTo(p0.x, p0.y);
ctx.lineTo(p0.x + 3, p0.y + 5);
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p1.x - 3, p1.y - 5);
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p1.x + 3, p1.y - 5);
ctx.stroke();
}
}
}
});


スクリーンショット

high-low.png