气泡图

气泡图用于同时显示三个维度的数据。气泡的位置由前两个维度和相应的水平和垂直坐标轴决定。第三个维度由单个气泡的大小表示。

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

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

const data = { datasets: [{ label: '第一个数据集', data: [{ x: 20, y: 30, r: 15 }, { x: 40, y: 10, r: 10 }], backgroundColor: 'rgb(255, 99, 132)' }] };

const data = {
  datasets: [{
    label: 'First Dataset',
    data: [{
      x: 20,
      y: 30,
      r: 15
    }, {
      x: 40,
      y: 10,
      r: 10
    }],
    backgroundColor: 'rgb(255, 99, 132)'
  }]
};

数据集属性

命名空间

• data.datasets[index] - 仅适用于此数据集的选项
• options.datasets.bubble - 适用于所有气泡数据集的选项
• options.elements.point - 适用于所有 点元素 的选项
• options - 适用于整个图表的选项

气泡图允许为每个数据集指定一些属性。这些属性用于设置特定数据集的显示属性。例如，气泡的颜色通常以这种方式设置。

名称	类型	可脚本化	可索引	默认值
backgroundColor	颜色	是	是	'rgba(0, 0, 0, 0.1)'
borderColor	颜色	是	是	'rgba(0, 0, 0, 0.1)'
borderWidth	数字	是	是	3
clip	数字|对象|false	-	-	未定义
data	对象[]	-	-	必需
drawActiveElementsOnTop	布尔值	是	是	真
hoverBackgroundColor	颜色	是	是	未定义
hoverBorderColor	颜色	是	是	未定义
hoverBorderWidth	数字	是	是	1
hoverRadius	数字	是	是	4
hitRadius	数字	是	是	1
label	字符串	-	-	未定义
order	数字	-	-	0
pointStyle	pointStyle	是	是	'circle'
rotation	数字	是	是	0
radius	数字	是	是	3

所有这些值，如果未定义，则回退到选项解析中描述的范围

通用

名称	描述
clip	如何相对于 chartArea 进行裁剪。正值允许溢出，负值在 chartArea 内裁剪那么多像素。0 = 在 chartArea 处裁剪。裁剪也可以针对每一侧进行配置：clip: {left: 5, top: false, right: -2, bottom: 0}
drawActiveElementsOnTop	在数据集中的其他气泡之上绘制数据集的活动气泡
label	出现在图例和工具提示中的数据集标签。
order	数据集的绘制顺序。也会影响工具提示和图例的顺序。 更多

样式

可以使用以下属性控制每个气泡的样式

名称	描述
backgroundColor	气泡背景色。
borderColor	气泡边框颜色。
borderWidth	气泡边框宽度（以像素为单位）。
pointStyle	气泡 形状样式。
rotation	气泡旋转（以度为单位）。
radius	气泡半径（以像素为单位）。

所有这些值，如果未定义，则回退到关联的 elements.point.* 选项。

交互

可以使用以下属性控制与每个气泡的交互

名称	描述
hitRadius	气泡的额外点击检测半径（以像素为单位）。
hoverBackgroundColor	悬停时气泡的背景颜色。
hoverBorderColor	悬停时气泡的边框颜色。
hoverBorderWidth	悬停时气泡的边框宽度（以像素为单位）。
hoverRadius	悬停时气泡的额外半径（以像素为单位）。

所有这些值，如果未定义，则回退到关联的 elements.point.* 选项。

默认选项

我们还可以更改气泡图类型的默认值。这样做会使从现在开始创建的所有气泡图使用新的默认值。可以在 Chart.overrides.bubble 中访问气泡图的默认配置。

数据结构

气泡图数据集需要包含一个 data 点数组，每个点由一个包含以下属性的对象表示

{
    // X Value
    x: number,
    // Y Value
    y: number,
    // Bubble radius in pixels (not scaled).
    r: number
}

重要： 半径属性 r 不会 被图表缩放，它是在画布上绘制的气泡的原始像素半径。

内部数据格式

{x, y, _custom}，其中 _custom 是半径。