#バブルチャート

バブルチャートは、3 つの次元のデータを同時に表示するために使用されます。バブルの位置は、最初の 2 つの次元と、対応する水平軸と垂直軸によって決まります。 3 番目の次元は、個々のバブルのサイズによって表されます。

const 構成 = {
  タイプ: 'バブル'、
  データ: データ、
  オプション: {}
};const config = {
  type: 'bubble',
  data: data,
  options: {}
};

#データセットのプロパティ

名前空間:

バブルチャートでは、データセットごとに多数のプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、泡の色は通常このように設定されます。

名前	タイプ	スクリプト可能	インデックス可能	デフォルト
`backgroundColor`	`Color`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`borderColor`	`Color`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`borderWidth`	`number`	はい	はい	`3`
`clip`	`number`\|`object`\|`false`	-	-	`undefined`
`data`	`object[]`	-	-	必要
`drawActiveElementsOnTop`	`boolean`	はい	はい	`true`
`hoverBackgroundColor`	`Color`	はい	はい	`undefined`
`hoverBorderColor`	`Color`	はい	はい	`undefined`
`hoverBorderWidth`	`number`	はい	はい	`1`
`hoverRadius`	`number`	はい	はい	`4`
`hitRadius`	`number`	はい	はい	`1`
`label`	`string`	-	-	`undefined`
`order`	`number`	-	-	`0`
`pointStyle`	`pointStyle`	はい	はい	`'circle'`
`rotation`	`number`	はい	はい	`0`
`radius`	`number`	はい	はい	`3`

これらすべての値がundefined、で説明されているスコープにフォールバックします。オプションの解決策

名前	説明
`clip`	chartArea を基準にしてクリップする方法。正の値ではオーバーフローが許可され、負の値では chartArea 内の多くのピクセルがクリップされます。`0`= chartArea でクリップします。クリッピングは側面ごとに構成することもできます。`clip: {left: 5, top: false, right: -2, bottom: 0}`
`drawActiveElementsOnTop`	データセットのアクティブなバブルをデータセットの他のバブルの上に描画します
`label`	凡例とツールヒントに表示されるデータセットのラベル。
`order`	データセットの描画順序。ツールヒントと凡例の順序にも影響します。もっと

各バブルのスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.point.*オプション。

各バブルとの相互作用は、次のプロパティで制御できます。

これらすべての値が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は半径です。