气泡图(Bubble Chart)

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

示例用法

// For a bubble chart
var myBubbleChart = new Chart(ctx, {
    type: "bubble",
    data: data,
    options: options
});

数据集属性

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

名称 类型 可脚本化 可索引 默认值
backgroundColor Color 'rgba(0,0,0,0.1)'
borderColor Color 'rgba(0,0,0,0.1)'
borderWidth Number Yes Yes 3
data Object[] - - required
hoverBackgroundColor Color undefined
hoverBorderColor Color undefined
hoverBorderWidth Number 1
hoverRadius Number 4
hitRadius Number 1
label String - - undefined
pointStyle String circle
radius Number 3

标签

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 上绘制的气泡的像素的原始半径。

{
    // X Value
    x: <Number>,

    // Y Value
    y: <Number>,

    // 气泡半径,不可缩放
    r: <Number>
}

results matching ""

    No results matching ""