javascript Chart.jsを使って回帰分析の結果をグラフ化する

作成日 2022.10.20
javascript
javascript

Chart.jsを使って回帰分析の結果をグラフ化するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. Chart.js
3. 回帰直線を求めて散布図と1次関数を作成

環境

OS windows11 pro 64bit
Chart.js 3.7.1
ブラウザ chrome 106.0.5249.103

Javascript サンプル集はこちら

Chart.js

こちらのサイトから最新版を確認して、CDN版を使用してます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

回帰直線を求めて散布図と1次関数を作成

まずは、回帰直線の切片と傾きを求めて、その結果をchart.jsを使用してグラフ化してます。
※CSSで全体の高さと幅を調整してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
</head>

<style>
  #wrap {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    margin-top: 100px;
  }
</style>

<body id="wrap">

  <canvas id="myChart"></canvas>

  <script>

    const ctx = document.getElementById("myChart").getContext('2d');

    // 回帰直線の傾きと切片を求める
    const linest = (obj) => {

      const n = obj.length;

      const X = obj.reduce((sum, v) => sum + v.x, 0);

      const Y = obj.reduce((sum, v) => sum + v.y, 0);

      const XX = obj.reduce((sum, v) => sum + v.x * v.x, 0);

      const XY = obj.reduce((sum, v) => sum + v.x * v.y, 0);

      // 傾き
      const a = (n * XY - X * Y) / (n * XX - X * X);

      // 切片
      const b = (XX * Y - XY * X) / (n * XX - X * X);

      return { a, b };

    }

    // 説明変数と目的変数
    const obj = [
      { x: 100, y: 300 },
      { x: 200, y: 450 },
      { x: 300, y: 550 },
      { x: 700, y: 800 },
      { x: 900, y: 1100 },
      { x: 1100, y: 2000 },
      { x: 1200, y: 2400 },
      { x: 1500, y: 3100 },
    ]

    const { a, b } = linest(obj)

    // 回帰直線用
    const arr = [];

    obj.forEach(function (v) {
      arr.push({ 'x': v.x, 'y': a * v.x + b });
    });

    const myChart = new Chart(ctx, {
     
      data: {
        datasets: [{
          type: 'scatter',
          label: '散布図',
          backgroundColor: 'rgba(60, 183, 13, 0.5)', // 色
          pointRadius: 5, // サイズ
          data: obj
        }, 
        { 
          type: 'line',
          label: '回帰直線',
          data: arr, // データ
          backgroundColor: 'rgba(255, 255, 100, 0.5)', // 背景色
          borderColor: 'rgba(255, 255, 100, 1)', // 線の色          
          borderWidth: 2,  // 線幅
          pointRadius: 0.5,  //点半径
          tension: 0, // 直線
          showLine: true, // 描画
          fill: false // 範囲の描画
        }]
      },
      options: {
        scales: {
          x: {
            min: 0,
            max: 1500,
            ticks: {
              color: '#f88',
            },
          },
          y: {
            min: 0,
            max: 3500,
            ticks: {
              color: '#48f',
            },
          },
        },
      }
    });
  </script>
</body>

</html>

実行結果をみると、散布図が作成されて回帰直線が引かれていることが確認できます。