1.5.6 气泡图(bubble

优质

小牛编辑

133浏览

2023-12-01

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

new Chart(document.getElementById("chartjs-6"),{"type":"bubble","data":{"datasets":[{"label":"First Dataset","data":[{"x":20,"y":30,"r":15},{"x":40,"y":10,"r":10}],"backgroundColor":"rgb(255, 99, 132)"}]}});

示例用法

// 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`

样式

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

名称	描述
`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>
}