Chart.js 氣泡圖

氣泡圖用于展示三個變量之間的關系。

氣泡的位置由前兩個變量決定，對應的是 X 軸和 Y 軸，第三個參數為氣泡的大小。

{
    // X 軸對應值
    x: number,

    // Y 軸對應值
    y: number,

    // 氣泡半徑，機關為像素
    r: number
}      

泡圖的 type 屬性為 bubble ，type 描述了圖表類型。

const config = {
  type: 'bubble',
  data: data,
  options: {}
};
      

接下來我們建立一個簡單的氣泡圖：

執行個體

const ctx = document.getElementById('myChart');

const data = {

  datasets: [{

    label: '氣泡圖執行個體',

    data: [{

      x: 20, // X 軸

      y: 30, // Y 軸

      r: 15   // 氣泡半徑

    }, {

      x: 30,

      y: 20,

      r: 20

    }, {

      x: 40,

      y: 10,

      r: 10

    }],

    backgroundColor: 'rgb(255, 99, 132)'

  }]

};

const config = {

  type: 'bubble', // 設定圖表類型

  data: data,  // 設定資料集

  options: {

  },

};

const myChart = new Chart(ctx, config);

以上執行個體輸出結果為：