為替レートのチャートをウェブサイトに表示したかったので、 Chart.js を使ってみました。
今回は、ローソク足のような細かいチャートではなくて、高値と安値が確認できる程度のラインチャートが表示できればよかったので、他にもっと高機能なチャートを表示するライブラリーはあると思うのですが、 Chart.js を使ってみることにしました。
環境
- Chart.js Version 2.7.2
Chart.js?
Chart.js は、次のような特徴があるようです。
- Open source
- 8 Chart types
- HTML5 Canvas
- Responsive
Installation
npm や Bower や CDN からインストールして使うことができるようです。 今回は、 CDN から使うことにしました。
Stand-Alone Build と Bundled Build
Chart.js には、 Stand-Alone Build と Bundled Build の二つがあるようです。
Files:
dist/Chart.jsdist/Chart.min.jsThe stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include Moment.js before Chart.js for the functionality of the time axis.
Stand-Alone Build には Moment.js が含まれていないようです。
Files:
dist/Chart.bundle.jsdist/Chart.bundle.min.jsThe bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues.
Bundled Build には Moment.js が含まれているようです。
Moment.js は、 time axes の機能を使うのに必要みたいです。 time axes は時間の軸のようで、 軸のデータを Date 型で扱えるようです。
アプリ側で Moment.js を使う必要がある場合は、 Moment.js を読み込んで、その後、 Stand-Alone Build を読み込む必要があるようです。 アプリ側で Moment.js を使う必要がない場合は、 Bundled Build だけを読み込めばよいみたいです。 アプリ側で Moment.js を読み込みつつ、 Bundled Build も読み込んでしまうと、それぞれの Moment.js が競合してしまってあまりよくないみたいです。
今回は、アプリ側で Moment.js を使う必要がないので、 Bundled Build を使うことにしました。
Getting Started
Getting Started のサンプルのチャートを表示してみます。
たぶん、棒グラフが表示されていると思います。
<canvas height="400" width="400" … のようにサイズを指定しているのですが、大きいような気もしますけれども。
When it comes to change the chart size based on the window size, a major limitation is that the canvas render size (canvas.width and .height) can not be expressed with relative values, contrary to the display size (canvas.style.width and .height). Furthermore, these sizes are independent from each other and thus the canvas render size does not adjust automatically based on the display size, making the rendering inaccurate.
Chart.js はレスポンシブ対応で、ウィンドウサイズに合わせていい感じに表示してくれるみたいです。 それが影響しているのかな。
折れ線グラフ
為替レートを折れ線グラフで表示してみます。
Line のページと Line のページのソースを参考に、次のように記述しました。
<div height="320" width="640">
<canvas id="canvas2"></canvas>
</div>
<script>
var ctx = document.getElementById('canvas2').getContext('2d');
var data = {
datasets: [{
data: [106.237, 105.877, 106.598, 106.774, 107.374, 106.937, 106.754, 107.19, 106.777, 107.294, 107.468, 107.104, 106.991, 107.223, 107.354, 107.768, 108.698, 108.808, 109.418, 109.288, 109.063],
fill: false,
label: '米ドル/円'
}],
labels: ['2018/04/02', '2018/04/03', '2018/04/04', '2018/04/05', '2018/04/06', '2018/04/09', '2018/04/10', '2018/04/11', '2018/04/12', '2018/04/13', '2018/04/16', '2018/04/17', '2018/04/18', '2018/04/19', '2018/04/20', '2018/04/23', '2018/04/24', '2018/04/25', '2018/04/26', '2018/04/27', '2018/04/30']
};
var options = {};
var c = new Chart(ctx, {
data: data,
options: options,
type: 'line'
});
</script>
凝ったオプションは指定せずに、ラベルとデータだけ指定してみました。
Chart.js の折れ線グラフのデフォルトだと、線の下側を塗りつぶしてしまうようなので、 fill: false だけつけました。
直線じゃなく、緩やかなカーブのある線になっています。 直線だと、ローソク足と切り離された印象も受けるので、緩やかな線の方がよいかもしれません。
オプションを指定することで直線にもできるみたいです。
Disable Bezier Curves に記載されていました。
ベジェ曲線を無効にすればよいみたいです。
options.elements.line.tension = 0 になるような指定をすると、ベジェ曲線を無効にすることができるようです。
こうすると、描画のパフォーマンスが向上するみたいです。
終わり
ラインチャートを画像で作成しようと思っていたのですが、 Chart.js で置き換えられそうです。 画像だと修正の手間がかかりますし、ファイルの容量も大きくなりますので、便利になりそうです。