# 气泡图

¥Bubble Chart

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

¥A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.

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

# 数据集属性

¥Dataset Properties

命名空间：

¥Namespaces:

data.datasets[index] - 仅此数据集的选项

¥data.datasets[index] - options for this dataset only
options.datasets.bubble - 所有气泡数据集的选项

¥options.datasets.bubble - options for all bubble datasets
options.elements.point - 所有点元素的选项

¥options.elements.point - options for all point elements
options - 整个图表的选项

¥options - options for the whole chart

气泡图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。比如气泡的颜色一般都是这样设置的。

¥The bubble chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bubbles is generally set this way.

名称	类型	可编写脚本	可转位	默认
`backgroundColor`	`Color`	是的	是的	`'rgba(0, 0, 0, 0.1)'`
`borderColor`	`Color`	是的	是的	`'rgba(0, 0, 0, 0.1)'`
`borderWidth`	`number`	是的	是的	`3`
`clip`	`number`\|`object`\|`false`	*	*	`undefined`
`data`	`object[]`	*	*	required
`drawActiveElementsOnTop`	`boolean`	是的	是的	`true`
`hoverBackgroundColor`	`Color`	是的	是的	`undefined`
`hoverBorderColor`	`Color`	是的	是的	`undefined`
`hoverBorderWidth`	`number`	是的	是的	`1`
`hoverRadius`	`number`	是的	是的	`4`
`hitRadius`	`number`	是的	是的	`1`
`label`	`string`	*	*	`undefined`
`order`	`number`	*	*	`0`
`pointStyle`	`pointStyle`	是的	是的	`'circle'`
`rotation`	`number`	是的	是的	`0`
`radius`	`number`	是的	是的	`3`

所有这些值，如果 undefined，回退到选项决议中描述的范围

¥All these values, if undefined, fallback to the scopes described in option resolution

# 一般的

¥General

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

# 样式

¥Styling

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

¥The style of each bubble can be controlled with the following properties:

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

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

¥All these values, if undefined, fallback to the associated elements.point.* options.

# 交互

¥Interactions

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

¥The interaction with each bubble can be controlled with the following properties:

名称	描述
`hitRadius`	用于命中检测的气泡附加半径（以像素为单位）。
`hoverBackgroundColor`	悬停时的气泡背景颜色。
`hoverBorderColor`	悬停时的气泡边框颜色。
`hoverBorderWidth`	悬停时的气泡边框宽度（以像素为单位）。
`hoverRadius`	悬停时气泡附加半径（以像素为单位）。

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

¥All these values, if undefined, fallback to the associated elements.point.* options.

# 默认选项

¥Default Options

我们还可以更改气泡图类型的默认值。这样做将为所有在此之后创建的气泡图提供新的默认值。可以在 Chart.overrides.bubble 访问气泡图的默认配置。

¥We can also change the default values for the Bubble chart type. Doing so will give all bubble charts created after this point the new defaults. The default configuration for the bubble chart can be accessed at Chart.overrides.bubble.

# 数据结构

¥Data Structure

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

¥Bubble chart datasets need to contain a data array of points, each point represented by an object containing the following properties:

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

重要：radius 属性，r 不按图表缩放，它是在画布上绘制的气泡的原始半径（以像素为单位）。

¥Important: the radius property, r is not scaled by the chart, it is the raw radius in pixels of the bubble that is drawn on the canvas.

# 内部数据格式

¥Internal data format

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

¥{x, y, _custom} where _custom is the radius.