TMLやCSS、JavaScriptはあまり経験がないのですが、JavaScriptのHighchartsライブラリを使って「資産推移チャートプログラム」を作りました。
このとき学んだことを書いていきます。
Highchartsとは
Highchartsとは、Webで線グラフや棒グラフ、円グラフやその他いろいろなグラフを簡単に描画できるJavaScriptライブラリです。
以下がHighchartsの公式ページです。
すべて英語で書かれているので、英語が得意でない方はなかなか難しいと思います。
どのようなグラフが描画できるのか知りたい方は、一度 demoページ を見てみると良いでしょう。
きっと自分が作りたいグラフに近いものが見つかるでしょう。
今回作るもの
今回は「１年間の体重推移を表示させる」という想定で、曲線グラフを表示させるところまでを簡単に説明します。
完成するとこのようになります。
実際に動きを見たい方はこちら。
ディレクトリ構成
sample-chart/
├─ index.html ........ チャート画面用HTML
└─ js/ ................... JavaScript格納ディレクトリ
└─ chart.js ..... チャート表示用JavaScriptソースコード
以下にソースコードを載せます。
これらは、各種ファイルにコピペすればすぐに動作が確認できると思います。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルチャート</title>
<!-- Highchartsを使うにはjQueryが必要なので読み込み -->
<!-- GoogleがホストするjQuery refs: https://developers.google.com/speed/libraries/#jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Highchartsを読み込み -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- 独自のjsファイルを読み込み -->
<script type="text/javascript" src="./js/chart.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>chart.js
document.addEventListener('DOMContentLoaded', function () {
chart = Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: '１年間の体重推移'
},
subtitle: {
text: '2020年版',
},
xAxis: {
title: {
text: '日付'
},
categories: ['1/1', '2/1', '3/1', '4/1', '5/1', '6/1', '7/1', '8/1', '9/1', '10/1', '11/1', '12/1']
},
yAxis: {
title: {
text: '体重'
}
},
tooltip: {
valueSuffix: 'Kg'
},
series: [{
name: '体重推移',
data: [50.0, 53.4, 58.2, 59.0, 57.8, 53.2, 52.1, 50.5, 49.1, 48.3, 49.1, 50.0]
}]
});
});ソースコードの解説
index.htmlはソースコードにコメントを書いていますので大事なポイントだけ。
- jQueryの読み込みこと
- Highchartsを読み込むこと
chart.jsの方を解説していきます。
chart
チャートの設定。
今回、typeにsplineを設定することで曲線にしています。
他にも、barやlineなどグラフの種類に応じて設定します。
title
チャート上部のタイトルに関する設定。
textでタイトル名を設定しています。
subtitle
チャート上部のタイトルの下に表示されるサブタイトルに関する設定。
textでサブタイトル名を設定しています。
xAxis
横軸の設定。
titleで横軸のタイトルを設定しています。
categoriesで横軸のカラムを設定しています。
yAxis
縦軸の設定。
titleで縦軸のタイトルを設定しています。
tooltip
ツールチップの設定。
チャートのデータポイントにホバーしたときの各種設定。
valueSuffixでデータの接尾語を設定しています。
series
チャートのデータ部分の設定。
nameでデータのが何者なのか属性を設定しています。
dataに表示させるデータを設定しています。
他にもいろいろなパラメータがありカスタマイズができるので、Highchartsの API Reference のページを読むと良いでしょう。
英語のみのページですが、API名からなんとなく動作が推測できるかと思います。
推測したら、それが正しいのか実際にコードを書いてみて、トライアンドエラーでやっていくと覚えられると思います。