JavaScript
chart.js

Chart.jsで高低線

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