泡泡圖

泡泡圖用於同時顯示三個維度的資料。泡泡的位置由前兩個維度和對應的水平和垂直軸決定。第三個維度則由各個泡泡的大小來表示。

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

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

const data = { datasets: [{ label: 'First Dataset', data: [{ x: 20, y: 30, r: 15 }, { x: 40, y: 10, r: 10 }], backgroundColor: 'rgb(255, 99, 132)' }] };

const data = {
  datasets: [{
    label: 'First Dataset',
    data: [{
      x: 20,
      y: 30,
      r: 15
    }, {
      x: 40,
      y: 10,
      r: 10
    }],
    backgroundColor: 'rgb(255, 99, 132)'
  }]
};

資料集屬性

命名空間

• data.datasets[index] - 僅適用於此資料集的選項
• options.datasets.bubble - 適用於所有泡泡資料集的選項
• options.elements.point - 適用於所有點元素的選項
• options - 整個圖表的選項

泡泡圖允許為每個資料集指定許多屬性。這些屬性用於設定特定資料集的顯示屬性。例如，泡泡的顏色通常是這樣設定的。

名稱	類型	可腳本化	可索引	預設值
backgroundColor	顏色	是	是	'rgba(0, 0, 0, 0.1)'
borderColor	顏色	是	是	'rgba(0, 0, 0, 0.1)'
borderWidth	數字	是	是	3
clip	number|object|false	-	-	未定義
data	object[]	-	-	必要
drawActiveElementsOnTop	布林值	是	是	true
hoverBackgroundColor	顏色	是	是	未定義
hoverBorderColor	顏色	是	是	未定義
hoverBorderWidth	數字	是	是	1
hoverRadius	數字	是	是	4
hitRadius	數字	是	是	1
label	字串	-	-	未定義
order	數字	-	-	0
pointStyle	pointStyle	是	是	'circle'
rotation	數字	是	是	0
radius	數字	是	是	3

如果這些值為 undefined，則會回退到選項解析中描述的範圍

一般

名稱	說明
clip	如何相對於 chartArea 剪裁。正值允許溢出，負值會在 chartArea 內剪裁那麼多像素。0 = 在 chartArea 剪裁。剪裁也可以針對每一側進行配置：clip: {left: 5, top: false, right: -2, bottom: 0}
drawActiveElementsOnTop	將資料集中處於活動狀態的泡泡繪製在資料集的其他泡泡之上
label	資料集的標籤，會顯示在圖例和工具提示中。
order	資料集的繪製順序。也會影響工具提示和圖例的順序。更多

樣式

可以使用以下屬性來控制每個泡泡的樣式

名稱	說明
backgroundColor	泡泡的背景顏色。
borderColor	泡泡的邊框顏色。
borderWidth	泡泡的邊框寬度 (以像素為單位)。
pointStyle	泡泡的形狀樣式。
rotation	泡泡的旋轉角度 (以度為單位)。
radius	泡泡的半徑 (以像素為單位)。

如果這些值為 undefined，則會回退到關聯的elements.point.* 選項。

互動

可以使用以下屬性來控制與每個泡泡的互動

名稱	說明
hitRadius	泡泡用於點擊偵測的額外半徑 (以像素為單位)。
hoverBackgroundColor	當滑鼠懸停時，泡泡的背景顏色。
hoverBorderColor	當滑鼠懸停時，泡泡的邊框顏色。
hoverBorderWidth	當滑鼠懸停時，泡泡的邊框寬度 (以像素為單位)。
hoverRadius	當滑鼠懸停時，泡泡的額外半徑 (以像素為單位)。

如果這些值為 undefined，則會回退到關聯的elements.point.* 選項。

預設選項

我們也可以變更泡泡圖類型的預設值。這樣做會讓之後建立的所有泡泡圖都使用新的預設值。泡泡圖的預設設定可以在 Chart.overrides.bubble 中存取。

資料結構

泡泡圖資料集需要包含一個由點組成的 data 陣列，每個點都由一個物件表示，該物件包含以下屬性

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

重要： 半徑屬性 r 不會由圖表縮放，它是繪製在畫布上的泡泡的原始半徑 (以像素為單位)。

內部資料格式

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