M.Hiroi's Home Page

JavaScript Programming

お気楽 Chart.js 超入門


Copyright (C) 2025 Makoto Hiroi
All rights reserved.

●折れ線グラフ

折れ線グラフの簡単な例題として、東京都の 2024 年度月平均気温 を Chart.js で表示してみましょう。 

リスト : 折れ線グラフ

<div style="width:600px; background-color: white">
  <canvas id="mychart0"></canvas>
</div>
<script>
  const ctx0 = document.getElementById('mychart0');
  new Chart(ctx0, {
    type: 'line',
    data: {
      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      datasets: [{
        label: '月平均気温',
        data: [7.1, 8.0, 9.6, 17.1, 20.0, 23.1, 28.7, 29.0, 26.6, 20.6, 13.7, 8.1]
      }, {
        label: '月平均最高気温',
        data: [11.8, 12.5, 14.8, 21.8, 24.8, 27.7, 33.5, 33.6, 30.9, 24.5, 17.8, 13.2]
      }, {
        label: '月平均最低気温',
        data: [2.9, 4.1, 5.1, 13.1, 15.6, 19.3, 25.0, 25.7, 23.5, 17.4, 10.2, 3.8]
      }]
    },
    options: { }
  });
</script>

●ヒストグラム

ある学年の生徒 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 - 135132.511
135 - 140137.567
140 - 145142.51219
145 - 150147.52544
150 - 155152.53276
155 - 160157.51793
160 - 165162.5699
165 - 170167.51100

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

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

リスト : ヒストグラム

<div style="width:600px; background-color: white">
  <canvas id="mychart"></canvas>
</div>
<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>

度数と累積度数を一緒に表示することもできます。 

リスト : ヒストグラム (2)

<div style="width:600px; background-color: white">
  <canvas id="mychart1"></canvas>
</div>
<script>
  const ctx1 = document.getElementById('mychart1');
  new Chart(ctx1, {
    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],
        },
        {
          label: '# 累積度数',
          data: [1, 7, 19, 44, 76, 93, 99, 100],
        }
      ]
    },
    options: {
      borderWidth: 3,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

●円グラフ

次は度数分布表を円グラフで描画してみましょう。type: に 'pai' を指定すると、円グラフになります。 

リスト : 円グラフ

<div style="width:400px; background-color: white">
  <canvas id="mychart4"></canvas>
</div>
<script>
  const ctx4 = document.getElementById('mychart4');
  new Chart(ctx4, {
    type: 'pie',
    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],
      }]
    },
    options: { }
  });
</script>

type に 'doughnut' を指定すると、ドーナッツ状の円グラフになります。 

リスト : 円グラフ (ドーナッツ)

<div style="width:400px; background-color: white">
  <canvas id="mychart5"></canvas>
</div>
<script>
  const ctx5 = document.getElementById('mychart5');
  new Chart(ctx5, {
    type: 'doughnut',
    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],
      }]
    },
    options: { }
  });
</script>

type に 'polarArea' を指定すると、鶏頭図になります。 

リスト : 円グラフ (鶏頭図)

<div style="width:400px; background-color: white">
  <canvas id="mychart6"></canvas>
</div>
<script>
  const ctx6 = document.getElementById('mychart6');
  new Chart(ctx6, {
    type: 'polarArea',
    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],
        backgroundColor: ['cyan', 'blue', 'yellow', 'green', 'red', 'blue', 'yellow', 'cyan'],
      }]
    },
    options: { }
  });
</script>

●レーダーチャート

データを正多角形の上に図示したものを「レーダーチャート (radar chart)」といいます。Chart.js の場合、type に radar を指定すると、レーダーチャートを描画することができます。 

リスト : レーダーチャート (1)

<div style="width:400px; background-color: white">
  <canvas id="mychart7"></canvas>
</div>
<script>
  const ctx7 = document.getElementById('mychart7');
  new Chart(ctx7, {
    type: 'radar',
    data: {
      labels: ['A', 'B', 'C', 'D', 'E'],
      datasets: [
        {
          label: 'Product-a',
          data: [7, 10, 7, 10, 5],
        }]
    },
    options: {
      scales: {
        r: {
          min: 0,
          max: 10,
        }
      }
    }
  });
</script>

複数のデータを表示することもできます。 

リスト : レーダーチャート (2)

<div style="width:400px; background-color: white">
  <canvas id="mychart8"></canvas>
</div>
<script>
  const ctx8 = document.getElementById('mychart8');
  new Chart(ctx8, {
    type: 'radar',
    data: {
      labels: ['A', 'B', 'C', 'D', 'E'],
      datasets: [
        {
          label: 'Product-a',
          data: [7, 10, 7, 10, 5],
        },
        {
          label: 'Product-b',
          data: [8, 7, 10, 4, 10],
        }]
    },
    options: {
      scales: {
        r: {
          min: 0,
          max: 10,
        }
      }
    }
  });
</script>

●相関図

一方が増加するときに他方も増加傾向が見られる場合を「正の相関」があるといい、他方に減少傾向が見られる場合を「負の相関」があるといいます。また、相関関係が明瞭な場合を「強い相関」といい、不明瞭な場合を「弱い相関」といいます。文章で説明してもわかりにくいのて、図に示すことにしましょう。

たとえば、次の配列に示す対のデータ [x, y] が 30 個あります。 

リスト : 対のデータ (1)

// 強い正の相関
const data1 = [
    [4.6, 5.5], [0.0, 1.7], [6.4, 7.2], [6.5, 8.3], 
    [4.4, 5.7], [1.1, 1.1], [2.8, 4.1], [5.1, 6.7], 
    [3.4, 5.0], [5.8, 6.6], [5.7, 6.3], [5.5, 5.6], 
    [7.9, 8.7], [3.0, 3.6], [6.8, 8.2], [6.2, 6.2], 
    [4.0, 5.0], [8.6, 9.5], [7.5, 8.9], [1.3, 2.6], 
    [6.3, 7.4], [3.1, 5.0], [6.1, 8.2], [5.3, 6.6], 
    [3.9, 5.1], [5.8, 7.0], [2.6, 3.5], [4.8, 6.3], 
    [2.2, 2.9], [5.3, 6.9] 
];

これを平面上にプロットしたものを「相関図 (correlation diagram)」とか「散布図」といいます。散布図は Chart.js で簡単に作成することができます。 

リスト : 散布図 (1)

<div style="width:600px; background-color: white">
  <canvas id="mychart2"></canvas>
</div>
<script>
  const ctx2 = document.getElementById('mychart2');
  new Chart(ctx2, {
    type: 'scatter',
    data: {
      datasets: [{
        label: 'Dataset#1',
        data: [
          {x: 4.6, y: 5.5}, {x: 0.0, y: 1.7}, {x: 6.4, y: 7.2}, {x: 6.5, y: 8.3}, 
          {x: 4.4, y: 5.7}, {x: 1.1, y: 1.1}, {x: 2.8, y: 4.1}, {x: 5.1, y: 6.7}, 
          {x: 3.4, y: 5.0}, {x: 5.8, y: 6.6}, {x: 5.7, y: 6.3}, {x: 5.5, y: 5.6}, 
          {x: 7.9, y: 8.7}, {x: 3.0, y: 3.6}, {x: 6.8, y: 8.2}, {x: 6.2, y: 6.2}, 
          {x: 4.0, y: 5.0}, {x: 8.6, y: 9.5}, {x: 7.5, y: 8.9}, {x: 1.3, y: 2.6}, 
          {x: 6.3, y: 7.4}, {x: 3.1, y: 5.0}, {x: 6.1, y: 8.2}, {x: 5.3, y: 6.6}, 
          {x: 3.9, y: 5.1}, {x: 5.8, y: 7.0}, {x: 2.6, y: 3.5}, {x: 4.8, y: 6.3}, 
          {x: 2.2, y: 2.9}, {x: 5.3, y: 6.9}
        ],
      }],
    },
    options: { },
  });
</script>

> const data1 = [
...     [4.6, 5.5], [0.0, 1.7], [6.4, 7.2], [6.5, 8.3],
...     [4.4, 5.7], [1.1, 1.1], [2.8, 4.1], [5.1, 6.7],
...     [3.4, 5.0], [5.8, 6.6], [5.7, 6.3], [5.5, 5.6],
...     [7.9, 8.7], [3.0, 3.6], [6.8, 8.2], [6.2, 6.2],
...     [4.0, 5.0], [8.6, 9.5], [7.5, 8.9], [1.3, 2.6],
...     [6.3, 7.4], [3.1, 5.0], [6.1, 8.2], [5.3, 6.6],
...     [3.9, 5.1], [5.8, 7.0], [2.6, 3.5], [4.8, 6.3],
...     [2.2, 2.9], [5.3, 6.9]
... ]
undefined
> function pairToObj(xs) { return {x: xs[0], y: xs[1]}; }
undefined
> data1.map(pairToObj)
[
  { x: 4.6, y: 5.5 }, { x: 0, y: 1.7 },
  { x: 6.4, y: 7.2 }, { x: 6.5, y: 8.3 },
  { x: 4.4, y: 5.7 }, { x: 1.1, y: 1.1 },
  { x: 2.8, y: 4.1 }, { x: 5.1, y: 6.7 },
  { x: 3.4, y: 5 },   { x: 5.8, y: 6.6 },
  { x: 5.7, y: 6.3 }, { x: 5.5, y: 5.6 },
  { x: 7.9, y: 8.7 }, { x: 3, y: 3.6 },
  { x: 6.8, y: 8.2 }, { x: 6.2, y: 6.2 },
  { x: 4, y: 5 },     { x: 8.6, y: 9.5 },
  { x: 7.5, y: 8.9 }, { x: 1.3, y: 2.6 },
  { x: 6.3, y: 7.4 }, { x: 3.1, y: 5 },
  { x: 6.1, y: 8.2 }, { x: 5.3, y: 6.6 },
  { x: 3.9, y: 5.1 }, { x: 5.8, y: 7 },
  { x: 2.6, y: 3.5 }, { x: 4.8, y: 6.3 },
  { x: 2.2, y: 2.9 }, { x: 5.3, y: 6.9 }
]

横軸を x, 縦軸を y とすると、x が増加すると y も増加していることが一目でわかります。これが正の相関です。そして、点がある直線上に並んでいることもわかるでしょう。強い相関性を示しています。

もちろん、複数のデータを表示することもできます。 

リスト : 対のデータ (2)

// 強い負の相関
const data2 = [
    [6.1, 3.7], [3.9, 7.5], [8.6, 1.7], [5.9, 3.9], 
    [3.5, 5.5], [7.0, 2.4], [0.9, 9.8], [0.0, 10.2], 
    [5.2, 4.2], [3.5, 6.5], [6.9, 3.2], [4.3, 5.9], 
    [5.0, 5.9], [7.4, 3.3], [3.1, 6.6], [4.0, 6.2], 
    [6.9, 2.9], [4.8, 5.0], [10.6, 0.0], [4.7, 4.3], 
    [2.9, 7.6], [7.2, 2.2], [3.6, 6.0], [5.5, 4.3], 
    [5.5, 4.5], [6.9, 3.2], [5.8, 3.6], [4.8, 4.6], 
    [7.3, 2.5], [4.7, 5.4] 
];

リスト : 散布図 (2)

<div style="width:600px; background-color: white">
  <canvas id="mychart3"></canvas>
</div>
<script>
  const ctx3 = document.getElementById('mychart3');
  new Chart(ctx3, {
    type: 'scatter',
    data: {
      datasets: [
        {
          label: 'Dataset#1',
          data: [
            {x: 4.6, y: 5.5}, {x: 0.0, y: 1.7}, {x: 6.4, y: 7.2}, {x: 6.5, y: 8.3}, 
            {x: 4.4, y: 5.7}, {x: 1.1, y: 1.1}, {x: 2.8, y: 4.1}, {x: 5.1, y: 6.7}, 
            {x: 3.4, y: 5.0}, {x: 5.8, y: 6.6}, {x: 5.7, y: 6.3}, {x: 5.5, y: 5.6}, 
            {x: 7.9, y: 8.7}, {x: 3.0, y: 3.6}, {x: 6.8, y: 8.2}, {x: 6.2, y: 6.2}, 
            {x: 4.0, y: 5.0}, {x: 8.6, y: 9.5}, {x: 7.5, y: 8.9}, {x: 1.3, y: 2.6}, 
            {x: 6.3, y: 7.4}, {x: 3.1, y: 5.0}, {x: 6.1, y: 8.2}, {x: 5.3, y: 6.6}, 
            {x: 3.9, y: 5.1}, {x: 5.8, y: 7.0}, {x: 2.6, y: 3.5}, {x: 4.8, y: 6.3}, 
            {x: 2.2, y: 2.9}, {x: 5.3, y: 6.9}
          ],
        },
        {
          label: 'Dataset#2',
          data: [
            {x: 6.1, y: 3.7}, {x: 3.9, y: 7.5}, {x: 8.6, y: 1.7}, {x: 5.9, y: 3.9}, 
            {x: 3.5, y: 5.5}, {x: 7.0, y: 2.4}, {x: 0.9, y: 9.8}, {x: 0.0, y: 10.2}, 
            {x: 5.2, y: 4.2}, {x: 3.5, y: 6.5}, {x: 6.9, y: 3.2}, {x: 4.3, y: 5.9}, 
            {x: 5.0, y: 5.9}, {x: 7.4, y: 3.3}, {x: 3.1, y: 6.6}, {x: 4.0, y: 6.2}, 
            {x: 6.9, y: 2.9}, {x: 4.8, y: 5.0}, {x: 10.6, y: 0.0}, {x: 4.7, y: 4.3}, 
            {x: 2.9, y: 7.6}, {x: 7.2, y: 2.2}, {x: 3.6, y: 6.0}, {x: 5.5, y: 4.3}, 
            {x: 5.5, y: 4.5}, {x: 6.9, y: 3.2}, {x: 5.8, y: 3.6}, {x: 4.8, y: 4.6}, 
            {x: 7.3, y: 2.5}, {x: 4.7, y: 5.4} 
          ],
        },
      ]
    },
    options: { },
  });
</script>

●バブルチャート

バブルチャートは、対となるデータに加えて、それに関係するもう一つのデータの量を円の大きさで表したグラフです。散布図において、3 番目のデータによってプロットする点の大きさが変化するグラフになります。Chart.js では、type に bubble を指定すると、バブルチャートを表示することができます。 

リスト : バブルチャート

<div style="width:600px; background-color: white">
  <canvas id="mychart9"></canvas>
</div>
<script>
  const ctx9 = document.getElementById('mychart9');
  new Chart(ctx9, {
    type: 'bubble',
    data: {
      datasets: [
      {
        label: 'Dataset#1',
        data: [
          {x: 128, y: 26.2, r: 14}, {x: 139.4, y: 37, r: 11}, {x: 129.7, y: 29.6, r: 8}, 
          {x: 129.7, y: 29.6, r: 9}, {x: 127.9, y: 26.3, r: 17.5}, {x: 127.2, y: 26.9, r: 19},
          {x: 144.1, y: 42.5, r: 22}, {x: 130.4, y: 28.7, r: 26}, {x: 140.4, y: 39.5, r: 12.5},
        ],
      }],
    },
    options: { }
  });
</script>

リスト : バブルチャート (2)

<div style="width:600px; background-color: white">
  <canvas id="mychart10"></canvas>
</div>
<script>
  const ctx10 = document.getElementById('mychart10');
  new Chart(ctx10, {
    type: 'bubble',
    data: {
      datasets: [
      {
        label: 'Dataset#1',
        data: [
          {x: 10, y:15.6, r: 4}, {x: 20, y:15.0, r: 8}, {x: 30, y:15.8, r: 16},
          {x: 40, y:16.1, r: 12}, {x: 50, y:16.9, r: 10}, {x: 60, y:16.9, r: 20},
        ],
      },
      {
        label: 'Dataset#2',
        data: [
          {x: 10, y:16.9, r: 20}, {x: 20, y:16.5, r: 10}, {x: 30, y:16.3, r: 12},
          {x: 40, y:17.1, r: 16}, {x: 50, y:16.6, r: 8}, {x: 60, y:16.4, r: 4},
        ],
      }],
    },
    options: {
      scales: {
        y: { min: 14, max: 18 },
      }
    }
  });
</script>

●時系列チャート

Chart.js で時系列のデータをグラフにしたい場合、日時を扱うライブラリとアダプタが必要になります。このページでは、とほほさんのおススメである date-fns - Modern JavaScript date utility library を使うことにします。インストールは以下のページを参照してください。

それでは簡単な例題として、東京の年平均気温を散布図で表してみましょう。データは「気象庁: 年ごとの値 (東京)」の 1975 年から 2021 年までの年平均気温を用いました。

表 : 東京の年平均気温(℃)
19751976197719781979198019811982
15.615.015.816.116.915.415.016.0
19831984198519861987198819891990
15.714.915.715.216.315.416.417.0
19911992199319941995199619971998
16.416.015.515.916.315.816.716.7
19992000200120022003200420052006
17.016.916.516.716.017.316.216.4
20072008200920102011201220132014
17.016.416.716.916.516.317.116.6
2015201620172018201920202021
16.416.415.816.816.516.516.6

このように、一定の時間経過によって計測されたデータ列のことを「時系列 (time series)」といいます。 

リスト : 時系列チャート

<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div style="width:600px; background-color: white">
  <canvas id="mychart11"></canvas>
</div>
<script>
  const ctx11 = document.getElementById('mychart11');
  new Chart(ctx11, {
    type: 'scatter',
    data: {
      datasets: [{
        label: '東京都年平均気温',
        data: [
          {x:'1975', y:15.6}, {x:'1976', y:15.0}, {x:'1977', y:15.8}, {x:'1978', y:16.1}, {x:'1979', y:16.9},
          {x:'1980', y:15.4}, {x:'1981', y:15.0}, {x:'1982', y:16.0}, {x:'1983', y:15.7}, {x:'1984', y:14.9},
          {x:'1985', y:15.7}, {x:'1986', y:15.2}, {x:'1987', y:16.3}, {x:'1988', y:15.4}, {x:'1989', y:16.4},
          {x:'1990', y:17.0}, {x:'1991', y:16.4}, {x:'1992', y:16.0}, {x:'1993', y:15.5}, {x:'1994', y:16.9},
          {x:'1995', y:16.3}, {x:'1996', y:15.8}, {x:'1997', y:16.7}, {x:'1998', y:16.7}, {x:'1999', y:17.0},
          {x:'2000', y:16.9}, {x:'2001', y:16.5}, {x:'2002', y:16.7}, {x:'2003', y:16.0}, {x:'2004', y:17.3},
          {x:'2005', y:16.2}, {x:'2006', y:16.4}, {x:'2007', y:17.0}, {x:'2008', y:16.4}, {x:'2009', y:16.7},
          {x:'2010', y:16.9}, {x:'2011', y:16.5}, {x:'2012', y:16.3}, {x:'2013', y:17.1}, {x:'2014', y:16.6},
          {x:'2015', y:16.4}, {x:'2016', y:16.4}, {x:'2017', y:15.8}, {x:'2018', y:16.8}, {x:'2019', y:16.5},
          {x:'2020', y:16.5}, {x:'2021', y:16.6}
        ],
      }],
    },
    options: {
      scales: {
        y: { min: 14, max: 18 },
        x: {
          type: 'time',
          time: {
            unit: 'year',
          }
        }
      }
    }
  });
</script>

リスト : 時系列チャート (2)

<div style="width:600px; background-color: white">
  <canvas id="mychart12"></canvas>
</div>
<script>
  const ctx12 = document.getElementById('mychart12');
  new Chart(ctx12, {
    type: 'line',
    data: {
      labels: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', 
               '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12'],
      datasets: [{
        label: '月平均気温',
        data: [7.1, 8.0, 9.6, 17.1, 20.0, 23.1, 28.7, 29.0, 26.6, 20.6, 13.7, 8.1]
      }, {
        label: '月平均最高気温',
        data: [11.8, 12.5, 14.8, 21.8, 24.8, 27.7, 33.5, 33.6, 30.9, 24.5, 17.8, 13.2]
      }, {
        label: '月平均最低気温',
        data: [2.9, 4.1, 5.1, 13.1, 15.6, 19.3, 25.0, 25.7, 23.5, 17.4, 10.2, 3.8]
      }]
    },
    options: { 
      scales: {
        x: {
          type: 'time',
          time: { unit: 'month' }
        }
      }
    }
  });
</script>

●回帰直線

2 つの確率変数の間に相関が認められるとき、その関係を曲線や曲面で代表することを「回帰 (regression)」といいます。相関に線形傾向が見られる場合、その関係を一本の直線で表すことができます。これを「直線回帰」とか「線形回帰」といい、その直線を「回帰直線」といいます。詳しい説明は拙作のページをお読みください。

簡単な例題として、東京の年平均気温が今後どの程度上昇するか、回帰を用いて推定してみましょう。上記ページの方法で計算したところ、回帰直線は y = 0.025 * (x - 1975) + 15.69 になりました。散布図に回帰直線を描画するのは簡単です。1975 年と 2030 年の y の値を求めると (1975, 15.69), (2030, 17.065) になります。これをプロットして、:showLine を true に設定すると、散布図上に回帰直線を引くことができます。 

リスト : 回帰直線

<div style="width:600px; background-color: white">
  <canvas id="mychart13"></canvas>
</div>
<script>
  const ctx13 = document.getElementById('mychart13');
  new Chart(ctx13, {
    type: 'scatter',
    data: {
      datasets: [
      {
        label: '東京都年平均気温',
        data: [
          {x:'1975', y:15.6}, {x:'1976', y:15.0}, {x:'1977', y:15.8}, {x:'1978', y:16.1}, {x:'1979', y:16.9},
          {x:'1980', y:15.4}, {x:'1981', y:15.0}, {x:'1982', y:16.0}, {x:'1983', y:15.7}, {x:'1984', y:14.9},
          {x:'1985', y:15.7}, {x:'1986', y:15.2}, {x:'1987', y:16.3}, {x:'1988', y:15.4}, {x:'1989', y:16.4},
          {x:'1990', y:17.0}, {x:'1991', y:16.4}, {x:'1992', y:16.0}, {x:'1993', y:15.5}, {x:'1994', y:16.9},
          {x:'1995', y:16.3}, {x:'1996', y:15.8}, {x:'1997', y:16.7}, {x:'1998', y:16.7}, {x:'1999', y:17.0},
          {x:'2000', y:16.9}, {x:'2001', y:16.5}, {x:'2002', y:16.7}, {x:'2003', y:16.0}, {x:'2004', y:17.3},
          {x:'2005', y:16.2}, {x:'2006', y:16.4}, {x:'2007', y:17.0}, {x:'2008', y:16.4}, {x:'2009', y:16.7},
          {x:'2010', y:16.9}, {x:'2011', y:16.5}, {x:'2012', y:16.3}, {x:'2013', y:17.1}, {x:'2014', y:16.6},
          {x:'2015', y:16.4}, {x:'2016', y:16.4}, {x:'2017', y:15.8}, {x:'2018', y:16.8}, {x:'2019', y:16.5},
          {x:'2020', y:16.5}, {x:'2021', y:16.6}
        ],
      },
      {
        label: '回帰直線',
        data: [{x:'1975', y: 15.69}, {x:'2030', y:17.065}],
        showLine: true,
        radius: 1
      }]
    },
    options: {
      scales: {
        y: { min: 14, max: 18 },
        x: {
          type: 'time',
          time: {
            unit: 'year',
          }
        }
      }
    }
  });
</script>
初版 2025 年 3 月