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);

以上实例输出结果为：