M.Hiroi's Home Page / Memorandum

3月5日

●Chart.js

Chart.js は JavaScript でグラフ (チャート) を描画するためのライブラリです。MIT ライセンスで公開されているので、無料で使用することができます。綺麗なグラフを簡単に作成できるようなので、M.Hiroi も実際に試してみました。

ある学年の生徒 100 人の身長を計測したとしましょう。ここでは、現実のデータではなく、乱数で作成した仮想的なデータを用います。

リスト : 身長のデータ

const height = [
    148.7, 149.5, 133.7, 157.9, 154.2, 147.8, 154.6, 159.1, 148.2, 153.1,
    138.2, 138.7, 143.5, 153.2, 150.2, 157.3, 145.1, 157.2, 152.3, 148.3,
    152.0, 146.0, 151.5, 139.4, 158.8, 147.6, 144.0, 145.8, 155.4, 155.5,
    153.6, 138.5, 147.1, 149.6, 160.9, 148.9, 157.5, 155.1, 138.9, 153.0,
    153.9, 150.9, 144.4, 160.3, 153.4, 163.0, 150.9, 153.3, 146.6, 153.3,
    152.3, 153.3, 142.8, 149.0, 149.4, 156.5, 141.7, 146.2, 151.0, 156.5,
    150.8, 141.0, 149.0, 163.2, 144.1, 147.1, 167.9, 155.3, 142.9, 148.7,
    164.8, 154.1, 150.4, 154.2, 161.4, 155.0, 146.8, 154.2, 152.7, 149.7,
    151.5, 154.5, 156.8, 150.3, 143.2, 149.5, 145.6, 140.4, 136.5, 146.9,
    158.9, 144.4, 148.1, 155.5, 152.4, 153.3, 142.3, 155.3, 153.1, 152.3
];

数値を並べただけではデータの特徴を把握することは難しいので、これを表にまとめます。たとえば、130 cm から 5 cm 間隔でデータの個数を求めると、次のようになります。

累積度数分布表
階級	階級値	度数	累積度数
130 - 135	132.5	1	1
135 - 140	137.5	6	7
140 - 145	142.5	12	19
145 - 150	147.5	25	44
150 - 155	152.5	32	76
155 - 160	157.5	17	93
160 - 165	162.5	6	99
165 - 170	167.5	1	100

階級はデータの範囲を表します。この表では x cm 以上 y cm 未満を x - y で表しています。階級値は階級 x - y の中央値 (x + y) / 2 のことです。度数はその階級に出現したデータの個数です。度数を示してある表のことを「度数分布表」といいます。累積度数はその階級までの度数を全部加えたものです。累積度数を示してある表を「累積度数分布表」といいます。

そして、度数分布表を柱上のグラフで表したものを「ヒストグラム」といいます。Chart.js を使ってグラフを作成すると、次のようになります。

リスト : ヒストグラム

<div style="width:600px">
  <canvas id="mychart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
  const ctx = document.getElementById('mychart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['130-135', '135-140', '140-145', '145-150', '150-155', '155-160', '160-165', '165-170'],
      datasets: [{
        label: '# 度数',
        data: [1, 6, 12, 25, 32, 17, 6, 1],
        borderWidth: 3,
	categoryPercentage: 0.9
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Chart.js は HTML5 の Canvas にグラフを描画する
Canvas の大きさを指定する場合は <div style="..."> ... </div> の style で行う
width (横) に合わせて height (縦) が決定される
省略した場合はブラウザの画面サイズに合わせて描画される
サイズを固定することもできる？ (要確認)
Chart.js の読み込みは CDN (Contents Delivery Network) を使うと簡単
new Chart() でグラフを描画する
第 1 引数は Canvas のオブジェクト
第 2 引数が描画するグラフ (オブジェクト)

type: 図 (グラフ) の種別

line (線), bar (棒), radar (ラダー), doughnut (ドーナッツ), pie (パイ),
polarArea (鶏頭図), bubble (バブル), scatter (散布図)

data: データ

labels: x 軸のラベル
datasets:

label: データのラベル
data: グラフのデータ
borderWidth: 棒グラフの線の太さ
categoryPercentage: 棒の幅の割合 (0 - 1, 1 を指定すると隣の棒と接する)

options: オプション

scales: スケール

x: x 軸のスケール
y: y 軸のスケール
beginAtZero: 0 から始める

このような簡単な記述で綺麗なグラフを描画できる Chart.js は、とても素晴らしいライブラリだと思います。M.Hiroi's Home Page の図を Chart.js で描画すると、かっこよく見えるかもしれませんね。

Memorandum

3月5日

●Chart.js

1月13日

●HTTPS

1月1日