Chart.js 散布図

散布図は2つのデータセットから複数の座標点を構成し、座標点の分布を調べることで、2つの変数間に関連性があるかどうかを判断したり、座標点の分布パターンを要約したりします。

データ構造：

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]

散布図type属性はscatter。

const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};

次に、簡単な散布図を作成します：

例

const ctx = document.getElementById('myChart');
const data = {
  datasets: [{
    label: '散布図の例',
    data: [{
      x: -10,
      y: 0
    }, {
      x: 0,
      y: 10
    }, {
      x: 10,
      y: 5
    }, {
      x: 0.5,
      y: 5.5
    }],
    backgroundColor: 'rgb(255, 99, 132)'
  }],
};
const config = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true, // チャートをレスポンシブに設定し、画面ウィンドウの変化に応じて変化させる
    maintainAspectRatio: false,// チャートの元の比率を維持する
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};
const myChart = new Chart(ctx, config);

試してみる »

上記の例の出力結果は次のとおりです：

その他の拡張