Chart.js - にほんご。

バブルチャート(Bubble)

更新日: 2018-09-04

バブルチャート(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)"
    }]
  }
});

名称typescriptableindexable説明
backgroundColorcolorrgba(0,0,0,0.1)
borderColorcolorrgba(0,0,0,0.1)
borderWidthnumber3
dataobject[]--必須
hoverBackgroundColorcolorundefined
hoverBorderColorcolorundefined
hoverBorderWidthnumber1
hoverRadiusnumber4
hitRadiusnumber1
labelstring--undefined
pointStylestringcircle
radiusnumber3

ラベル

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

スタイル

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

名称説明
backgroundColorバブルの背景色。
borderColorバブルの枠線の色。
borderWidthバブルの枠線の太さ(px)。
pointStyleバブルのスタイル。 詳しくはpointスタイルを参照してください。
radiusバブルの半径(px)。

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

インタラクション

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

名称説明
hoverBackgroundColorホバーした時のバブルの背景色。
hoverBorderColorホバーした時のバブルの枠線の色。
hoverBorderWidthホバーした時のバブルの枠線の太さ(px)。
hoverRadiusホバーした時のバブルの半径(px)。
hitRadiusマウスイベントを発生させるバブルのサイズ(px)。

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

デフォルトオプション

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

データ構造

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

{
    // X値
    x: Number,

    // Y値
    y: Number,

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

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


© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。