气泡图(Bubble Chart)

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

示例用法

  1. // For a bubble chart
  2. var myBubbleChart = new Chart(ctx, {
  3. type: "bubble",
  4. data: data,
  5. options: options
  6. });

数据集属性

气泡图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。

名称类型可脚本化可索引默认值
backgroundColorColor'rgba(0,0,0,0.1)'
borderColorColor'rgba(0,0,0,0.1)'
borderWidthNumberYesYes3
dataObject[]--required
hoverBackgroundColorColorundefined
hoverBorderColorColorundefined
hoverBorderWidthNumber1
hoverRadiusNumber4
hitRadiusNumber1
labelString--undefined
pointStyleStringcircle
radiusNumber3

标签

label定义了与数据集关联的文本,并且出现在legend和tooltips中。

样式

每个气泡的风格可以通过以下属性进行控制:

名称描述
backgroundColor七宝背景色
borderColor气泡边框色
borderWidth气泡边框宽度 (以像素为单位)
pointStyle气泡形状样式
radius气泡半径(以像素为单位)

All these values, if undefined, fallback to the associated elements.point.* options.如果这些值是undefined,则回退到相关的elements.point.*选项。

交互

与每个气泡的相互作用可以通过以下属性进行控制:

名称描述
hoverBackgroundColor悬停时气泡背景色
hoverBorderColor悬停时气泡边框色
hoverBorderWidth悬停时气泡边框宽度 (以像素为单位)
hoverRadius气泡悬停时 额外半径 (以像素为单位)
hitRadius气泡悬停时 额外命中检测半径 (以像素为单位)

如果这些值是undefined,都会回退到相关的elements.point.*选项。

默认选项

我们也可以更改气泡图表类型的默认值。这样做会使所有在这个点之后创建的气泡图表成为新的默认值。气泡图的默认配置可以在Chart.defaults.bubble中访问。

数据结构

对于气泡图,数据集需要包含一组数据点。每个点必须实现气泡数据对象接口。

气泡数据对象

气泡图的数据以对象的形式传递。该对象必须实现以下接口。请注意,半径属性r 不会被图表缩放。它是在 canvas 上绘制的气泡的像素的原始半径。

  1. {
  2. // X Value
  3. x: <Number>,
  4. // Y Value
  5. y: <Number>,
  6. // 气泡半径,不可缩放
  7. r: <Number>
  8. }