ChartJS 气泡图

• 

  定义和使用

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

  当我们想要显示类似于饼图的比较数据，同时也要显示上下文的值的范围时通常使用这种类型的图表。

  示例：

  // 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	气泡半径（以像素为单位）

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

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

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

• 

  配置选项

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

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

  {
    // X Value
    x: <Number>,
  
    // Y Value
    y: <Number>,
  
    // 气泡半径，不可缩放
    r: <Number>
  }