バブルチャート(Bubble)

バブルチャート(BubbleChart)は、3次元のデータを同時に表示するために使用されます。 バブルの位置は、最初の2つの値と対応するX軸とY軸によって決定します。 3つ目の値はバブルのサイズによって表現します。

使用例

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: data,
    options: options
});

データセットプロパティ

折れ線グラフは、各データセットに対して、いくつかのプロパティを設定することができます。 これらは特定のデータセットの表示プロパティを設定するために使用されます。 例えば、バブルの色は通常このように設定することができます。

new Chart(ctx, {
  type: "bubble",
  data: {
    datasets: [{
      backgroundColor: "rgb(255, 99, 132)"
    }]
  }
});

全般

スタイル

各バブルのスタイルは、以下のプロパティで設定することができます。

これらの値がundefinedの場合、 関連するelements.point.*オプションにフォールバックします。

インタラクション

各バブルのインタラクションは、以下のプロパティで設定することができます。

これらの値がundefinedの場合、elements.point.*オプションにフォールバックします。

デフォルトオプション

バブルチャートはデフォルト値を変更することができます。 そうすることで、デフォルト値の変更以降、 バブルチャートは新しいデフォルト値で生成されます。 バブルチャートのデフォルト値はChart.defaults.bubbleでアクセスすることができます。

データ構造

バブルチャートでは、データセットにdataの配列が含まれている必要があり、 各値は以下のプロパティを含んだオブジェクトでなければなりません。

{
    // X値
    x: Number,

    // Y値
    y: Number,

    // バブルの半径(px)。スケールされません。
    r: Number
}

重要: 半径プロパティ(r)は、スケールされません。 バブルは指定した半径(px)のサイズで表示されます。