# バブルチャート

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

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

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

名前空間

バブルチャートでは、各データセットに多くのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、バブルの色は一般的にこの方法で設定されます。

名前	タイプ	スクリプト化可能	インデックス化可能	デフォルト
`backgroundColor`	`色`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`borderColor`	`色`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`borderWidth`	`数値`	はい	はい	`3`
`clip`	`数値`\|`オブジェクト`\|`false`	-	-	`未定義`
`data`	`object[]`	-	-	必須
`drawActiveElementsOnTop`	`真偽値`	はい	はい	`true`
`hoverBackgroundColor`	`色`	はい	はい	`未定義`
`hoverBorderColor`	`色`	はい	はい	`未定義`
`hoverBorderWidth`	`数値`	はい	はい	`1`
`hoverRadius`	`数値`	はい	はい	`4`
`hitRadius`	`数値`	はい	はい	`1`
`label`	`文字列`	-	-	`未定義`
`order`	`数値`	-	-	`0`
`pointStyle`	`pointStyle`	はい	はい	`'circle'`
`rotation`	`数値`	はい	はい	`0`
`radius`	`数値`	はい	はい	`3`

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

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

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

これらの値がすべて未定義の場合、関連付けられたelements.point.*オプションにフォールバックします。

各バブルとのインタラクションは、次のプロパティで制御できます。

これらの値がすべて未定義の場合、関連付けられた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は半径です。