バブルチャート

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

使用例

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

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

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

名前 型 スクリプト可能 インデックス可能 初期値
backgroundColor Color Yes Yes 'rgba(0,0,0,0.1)'
borderColor Color Yes Yes 'rgba(0,0,0,0.1)'
borderWidth Number Yes Yes 3
data Object[] - - 必須
hoverBackgroundColor Color Yes Yes undefined
hoverBorderColor Color Yes Yes undefined
hoverBorderWidth Number Yes Yes 1
hoverRadius Number Yes Yes 4
hitRadius Number Yes Yes 1
label String - - undefined
pointStyle String Yes Yes circle
rotation Number Yes Yes 0
radius Number Yes Yes 3

ラベリング

labelは、データセットに結び付けられたテキストを定義します。これは凡例とツールチップに現れます。

スタイリング

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

名前 説明
backgroundColor バブルの背景色。
borderColor バブルの境界線の色。
borderWidth バブルの境界線の太さ (ピクセル単位)。
pointStyle バブルの形状
rotation バブルの回転角度(度単位)。
radius バブルの半径 (ピクセル単位)。

undefinedの場合、これらの値はすべて関連するelements.point.*オプションで代替されます。

インタラクション

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

名前 説明
hoverBackgroundColor マウスオーバー時のバブルの塗り色。
hoverBorderColor マウスオーバー時のバブルの境界線の色。
hoverBorderWidth マウスオーバー時のバブルの境界線の太さ(ピクセル単位)。
hoverRadius マウスオーバー用のバブルの追加半径(ピクセル単位)。
hitRadius マウスオーバー検出のためにバブル半径に追加される半径。(ピクセル単位)。

undefinedの場合、これらの値はすべて関連するelements.point.*オプションで代替されます。

デフォルトオプション

また、バブルチャートのデフォルト値を変更することもできます。そうすることで、その時点以降に作成されたすべてのバブルチャートが新しい初期値を持つことになります。バブルチャートのデフォルト設定はChart.defaults.bubbleでアクセスできます。

データ構造

バブルチャートデータセットには、点のdata配列が含まれている必要があります。各点は、次のプロパティを含むオブジェクトによって表されます。

{
    // X 値
    x: <Number>,

    // Y 値
    y: <Number>,

    // バブル半径(ピクセル単位, スケールされない)
    r: <Number>
}

重要: 半径の設定において、rはグラフでスケールされません、キャンバスに描画されるバブルのピクセル単位の生の半径です。

results matching ""

    No results matching ""