概要
SVG または VML を使用してブラウザ内でレンダリングされるバブルチャート。ふきだしにカーソルを合わせるとヒントが表示されます。
バブルチャートは、2 ～ 4 つのディメンションを含むデータセットを可視化するために使用します。最初の 2 つのディメンションは座標、3 つ目は色、4 つ目はサイズとして視覚化されます。
例
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="series_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
数字ごとの色
次の例に示すように、colorAxis オプションを使用すると、値に比例してバブルの色を指定できます。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]);
var options = {
colorAxis: {colors: ['yellow', 'red']}
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
ラベルのカスタマイズ
バブルの書体、フォント、色は、bubble.textStyle オプションを使用して制御できます。
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>
上のグラフのラベルは読みにくいため、その理由の 1 つは、周囲に余白があることです。これはオーラと呼ばれます。グラフを使用しない場合は、bubble.textStyle.auraColor を 'none' に設定します。
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none'
}
}
};
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none',
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>
読み込み中
google.charts.load パッケージ名は "corechart" です。
google.charts.load("current", {packages: ["corechart"]});
ビジュアリゼーションのクラス名は google.visualization.BubbleChart です。
var visualization = new google.visualization.BubbleChart(container);
データ形式
行: テーブルの各行は 1 つのバブルを表します。
Columns:
| 列 0 | 列 1 | 列 2 | 列 3（省略可） | 列 4（省略可） | |
|---|---|---|---|---|---|
| 使用目的: | バブルの ID（名前） | X 座標 | Y 座標 | 系列 ID またはグラデーション スケールの色を表す値。列の種類によって次のいずれかを行います。
|
サイズ。この列の値は、sizeAxis オプションを使用して実際のピクセル値にマッピングされます。 |
| データの種類: | 文字列 | 数値 | 数値 | 文字列または数値 | 数値 |
設定オプション
| 名前 | |
|---|---|
| Animation.duration |
アニメーションの長さ（ミリ秒単位）。詳細については、アニメーションのドキュメントをご覧ください。 タイプ: 数値
デフォルト: 0
|
| image.easing |
アニメーションに適用するイージング関数。以下のオプションを使用できます。
型: string
デフォルト: 「リニア」
|
| Animation.startup |
初回描画時にグラフをアニメーション化するかどうかを指定します。 型: boolean
デフォルト: false
|
| 軸タイトルの位置 |
軸のタイトルを配置する場所（グラフ領域との比較）サポートされている値:
型: string
デフォルト: 'out'
|
| backgroundColor |
グラフのメイン領域の背景色。単純な HTML カラー文字列、たとえば タイプ: 文字列またはオブジェクト
デフォルト: '白'
|
| backgroundColor.stroke |
グラフの枠線の色（HTML の色文字列）。 型: string
デフォルト: '#666'
|
| backgroundColor.strokeWidth |
枠線の幅（ピクセル単位）。 タイプ: 数値
デフォルト: 0
|
| backgroundColor.fill |
グラフの塗りつぶしの色。HTML の色文字列で指定します。 型: string
デフォルト: '白'
|
| bubble |
メンバーがバブルの視覚的なプロパティを構成するオブジェクト。 タイプ: オブジェクト
デフォルト: null
|
| bubble.opacity |
バブルの不透明度。0 は完全に透明、1 は完全に不透明です。 タイプ: 0.0 ～ 1.0 の数値
デフォルト: 0.8
|
| バブルストローク |
バブルのストロークの色。 型: string
デフォルト: '#ccc'
|
| バブルテキスト。 |
バブルテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 {color: <string>, fontName: <string>, fontSize: <number>}
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| グラフ領域 |
メンバーがグラフ領域の配置とサイズを設定するためのオブジェクト（グラフ自体が描画される軸と凡例を除く）。数字と、それに続く % の 2 つの形式がサポートされています。単純な数値はピクセル単位で表される値であり、数値の後に % が続く率がパーセンテージです。例: タイプ: オブジェクト
デフォルト: null
|
| ChartArea.backgroundColor |
グラフ領域の背景色。文字列を使用する場合、16 進文字列（例:「#fdc」）または英語の色名で指定してください。オブジェクトを使用する場合、以下のプロパティを指定できます。
タイプ: 文字列またはオブジェクト
デフォルト: '白'
|
| ChartArea.left |
グラフの左枠線からの距離。 タイプ: 数値または文字列
デフォルト: 自動
|
| ChartArea.top |
グラフの上枠線からの距離。 タイプ: 数値または文字列
デフォルト: 自動
|
| ChartArea.width |
グラフの領域の幅。 タイプ: 数値または文字列
デフォルト: 自動
|
| ChartArea.height |
グラフの領域の高さ。 タイプ: 数値または文字列
デフォルト: 自動
|
| 色 |
グラフの要素に使用する色。文字列の配列。各要素は HTML の色文字列です（例: 型: 文字列の配列
デフォルト: デフォルトの色
|
| colorAxis |
色の列の値と色、またはグラデーション スケールのマッピングを指定するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {minValue: 0, colors: ['#FF0000', '#00FF00']}
タイプ: オブジェクト
デフォルト: null
|
| colorAxis.minValue |
存在する場合は、グラフの色データの最小値を指定します。この値以下のカラーデータ値は、 タイプ: 数値
デフォルト: グラフデータのカラー列の最小値
|
| colorAxis.maxValue |
存在する場合は、グラフの色データの最大値を指定します。この値以上のカラーデータ値は、 タイプ: 数値
デフォルト: グラフデータのカラー列の最大値
|
| colorAxis.values |
存在する場合、値と色の関連付け方法を制御します。各値は、 型: 数値の配列
デフォルト: null
|
| colorAxis.colors（色 Axis.色） |
ビジュアリゼーション内の値に割り当てる色。文字列の配列。各要素は HTML の色文字列です（例: タイプ: 色文字列の配列。
デフォルト: null
|
| colorAxis.legend |
グラデーション カラーの凡例のスタイルを指定するオブジェクト。 タイプ: オブジェクト
デフォルト: null
|
| colorAxis.legend.position |
凡例の位置。次のいずれか 1 つを指定できます。
タイプ: オブジェクト
デフォルト: 「top」
|
| colorAxis.legend.textStyle |
凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 {color: <string>, fontName: <string>, fontSize: <number>}
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| colorAxis.legend.numberFormat |
数値ラベルの形式文字列。これは、ICU パターンセットのサブセットです。たとえば、 型: string
デフォルト: 自動
|
| enableInteractivity |
グラフでユーザーベースのイベントがスローされるか、ユーザー操作に反応するか。false の場合、グラフは「select」やその他の操作ベースのイベント（準備完了イベントやエラーイベントをスローしません）をスローせず、ユーザー入力に応じてホバーテキストを表示するなど、変化しません。 型: boolean
デフォルト: true
|
| explorer |
この機能は試験運用版であり、今後のリリースで変更される可能性があります。 注: エクスプローラは、連続軸（数値や日付など）でのみ機能します。 タイプ: オブジェクト
デフォルト: null
|
| explorer.actions |
Google グラフ エクスプローラでは、次の 3 つのアクションがサポートされています。
型: 文字列の配列
デフォルト: [dragToPan」、「rightClickToReset]
|
| explorer.軸 |
型: string
デフォルト: 水平パンと垂直パンの両方
|
| explorer.keepInBounds |
デフォルトでは、データの場所に関係なく、ユーザーはすべての画面を移動できます。元のグラフの外には移動しないよう、 型: boolean
デフォルト: false
|
| explorer.maxZoomIn |
エクスプローラでズームインできる最大値です。デフォルトでは、ユーザーは元のビューの 25% しか表示されないような大きさにズームインできます。 タイプ: 数値
デフォルト: 0.25
|
| explorer.maxZoomOut |
エクスプローラでズームアウトできる最大値です。デフォルトでは、使用可能なスペースの 1/4 しかグラフで使用されないほどズームアウト可能です。 タイプ: 数値
デフォルト: 4
|
| explorer.zoomDelta |
ユーザーがズームインまたはズームアウトすると、 タイプ: 数値
デフォルト: 1.5
|
| fontSize |
グラフ内のすべてのテキストのデフォルトのフォントサイズ（ピクセル単位）です。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 タイプ: 数値
デフォルト: 自動
|
| フォント名 |
グラフ内のすべてのテキストのデフォルトのフォント フェイス。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 型: string
デフォルト: 「Arial」
|
| forceIFrame |
インライン フレーム内にグラフを描画します。（IE8 では、このオプションは無視されます。すべての IE8 チャートは i-frame で描画されます）。 型: boolean
デフォルト: false
|
| 軸 |
メンバーがさまざまな横軸の要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
タイプ: オブジェクト
デフォルト: null
|
| hAxis.baseline |
横軸のベースライン。 タイプ: 数値
デフォルト: 自動
|
| hAxis.baselineColor |
横軸のベースラインの色。任意の HTML 色文字列（例: タイプ: 数値
デフォルト: 'black'
|
| hAxis.direction |
横軸の値の増加方向。値の順序を逆にするには、 タイプ: 1 または -1
デフォルト: 1
|
| hAxis.format |
数値軸ラベルの形式文字列。これは、ICU パターンセットのサブセットです。たとえば
ラベルに適用される実際の形式は、API の読み込み先のロケールから取得されます。詳細については、特定のロケールでのグラフの読み込みをご覧ください。
ティック値とグリッド線を計算する際に、関連するすべてのグリッドライン オプションの複数の組み合わせが考慮され、書式設定されたティックラベルが重複する場合、または重複する場合は代替が拒否されます。整数のティック値のみを表示する場合は 型: string
デフォルト: 自動
|
| hAxis.gridlines |
横軸のグリッド線を構成するプロパティを持つオブジェクト。 横軸のグリッド線は縦に描画されます。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {color: '#333', minSpacing: 20}
タイプ: オブジェクト
デフォルト: null
|
| hAxis.gridlines.color |
グラフ領域内の水平グリッド線の色有効な HTML 色の文字列を指定します。 型: string
デフォルト: '#CCC'
|
| hAxis.gridlines.count |
グラフ領域内の水平グリッド線のおおよその数。
タイプ: 数値
デフォルト: -1
|
| hAxis.gridlines.units |
グラフで計算されたグリッド線を使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。 一般的な形式は次のとおりです。
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
詳細については、日付と時刻をご覧ください。 タイプ: オブジェクト
デフォルト: null
|
| hAxis.minorGridlines |
横軸にマイナー グリッドラインを構成するメンバーを含むオブジェクト（hAxis.gridlines オプションと同様）。 タイプ: オブジェクト
デフォルト: null
|
| hAxis.minorGridlines.color |
グラフ領域の横並びのマイナー グリッド線の色。有効な HTML 色の文字列を指定します。 型: string
デフォルト: グリッド線と背景色のブレンド
|
| hAxis.minorGridlines.count |
タイプ: 数値
デフォルト: 1
|
| hAxis.minorGridlines.units |
グラフの計算のマイナー グリッドラインで使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。 一般的な形式は次のとおりです。
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
詳細については、日付と時刻をご覧ください。 タイプ: オブジェクト
デフォルト: null
|
| hAxis.logScale |
型: boolean
デフォルト: false
|
| hAxis.scaleType |
型: string
デフォルト: null
|
| hAxis.textPosition |
グラフの領域に対する水平軸のテキストの位置。サポートされている値: out、in、none。 型: string
デフォルト: 'out'
|
| hAxis.textStyle |
横軸のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.ticks |
自動生成された X 軸の目盛を、指定した配列に置換します。配列の各要素は、有効なティック値（数値、日付、日時、時刻など）またはオブジェクトのいずれかである必要があります。オブジェクトの場合は、ティック値用の
オーバーライドする 例:
型: 要素の配列
デフォルト: 自動
|
| hAxis.title |
型: string
デフォルト: null
|
| hAxis.titleTextStyle |
横軸のタイトル テキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.maxValue |
横軸の最大値を指定の値に移動します。これはほとんどのグラフで右向きです。データの最大 x 値より小さい値に設定されている場合は無視されます。
タイプ: 数値
デフォルト: 自動
|
| hAxis.minValue |
横軸の最小値を指定の値に移動します。これはほとんどのグラフで左になります。データの最小 x 値より大きい値に設定されている場合は無視されます。
タイプ: 数値
デフォルト: 自動
|
| hAxis.viewWindowMode |
横軸をスケーリングしてグラフ領域内の値をレンダリングする方法を指定します。次の文字列値がサポートされます。
型: string
デフォルト: 「tyly」と同じですが、使用される場合には
haxis.viewWindow.min と haxis.viewWindow.max が優先されます。 |
| hAxis.viewWindow |
横軸の切り抜き範囲を指定します。 タイプ: オブジェクト
デフォルト: null
|
| hAxis.viewWindow.max |
レンダリングする水平方向のデータ値の上限。
タイプ: 数値
デフォルト: 自動
|
| hAxis.viewWindow.min |
レンダリングする最小水平データ値。
タイプ: 数値
デフォルト: 自動
|
| 高さ |
グラフの高さ（ピクセル単位）。 タイプ: 数値
デフォルト: 要素を格納する高さ
|
| 凡例 |
メンバーがさまざまな要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
タイプ: オブジェクト
デフォルト: null
|
| 凡例.alignment |
凡例の配置。次のいずれか 1 つを指定できます。
凡例の中心の開始、中央、終了は、スタイル（垂直または水平）を基準とします。たとえば、「右」の凡例では「開始」と「終了」がそれぞれ上部と下部に存在します。「上部」の凡例の場合、「開始」と「終了」はそれぞれ領域の左側と右側になります。 デフォルト値は、凡例の位置によって異なります。「凡例」のデフォルトは、デフォルトは「センター」、その他の凡例は「開始」です。 型: string
デフォルト: 自動
|
| 凡例.maxLines |
凡例の最大行数。複数の行に設定すると、凡例に行が追加されます。注: レンダリングされる実際の行数を判断するために使用される正確なロジックは、まだ可変です。 現在、このオプションは凡例.position が「top」の場合にのみ動作します。 タイプ: 数値
デフォルト: 1
|
| 凡例.pageIndex |
凡例で最初に選択した 0 から始まるページ インデックス。 タイプ: 数値
デフォルト: 0
|
| 凡例.position |
凡例の位置。次のいずれか 1 つを指定できます。
型: string
デフォルト: 「right」
|
| 凡例テキストスタイル |
凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| セレクション モード |
型: string
デフォルト: 'single'
|
| series |
オブジェクトがオブジェクト名（色の列の値）と各オブジェクトのオブジェクト（グラフ内の対応する系列の形式）になっています。シリーズまたは値が指定されていない場合は、グローバル値が使用されます。各オブジェクトは次のプロパティをサポートします。
series: {'Europe': {color: 'green'}}
タイプ: ネストされたオブジェクトを含むオブジェクト
デフォルト: {}
|
| sizeAxis |
値とバブルサイズを関連付ける方法を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {minValue: 0, maxSize: 20}
タイプ: オブジェクト
デフォルト: null
|
| sizeAxis.maxSize |
可能な最大のバブルの最大半径（ピクセル単位）。 タイプ: 数値
デフォルト: 30
|
| sizeAxis.maxValue |
タイプ: 数値
デフォルト: グラフデータの [サイズ] 列の最大値
|
| sizeAxis.minSize |
バブルの中で最小の半径（ピクセル単位）です。 タイプ: 数値
デフォルト: 5
|
| sizeAxis.minValue |
タイプ: 数値
デフォルト: グラフデータの [サイズ] 列の最小値
|
| sortBubblesBySize |
true の場合、バブルがサイズより大きいときに、小さいバブルが上になるように並べ替えられます。false の場合、バブルは DataTable 内の順序に従って並べ替えられます。 型: boolean
デフォルト: true
|
| テーマ |
テーマとは、特定のグラフの動作や視覚効果を実現するために連携する一連の事前定義オプション値です。現在選択できるテーマは 1 つのみです。
型: string
デフォルト: null
|
| title |
グラフの上に表示するテキスト。 型: string
デフォルト: タイトルなし
|
| titlePosition |
グラフのタイトルを配置する場所（グラフ領域との比較）サポートされている値:
型: string
デフォルト: 'out'
|
| titleTextStyle |
タイトル テキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| ツールチップ |
さまざまなツールチップ要素を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {textStyle: {color: '#FF0000'}, showColorCode: true}
タイプ: オブジェクト
デフォルト: null
|
| tooltip.isHTML |
true に設定した場合は、（SVG レンダリングではなく）HTML レンダリングのツールチップを使用します。詳しくは、ツールチップのコンテンツのカスタマイズをご覧ください。 注: ツールチップの列データロールを使用した HTML ツールチップのコンテンツのカスタマイズは、バブルチャートの可視化ではサポートされていません。 型: boolean
デフォルト: false
|
| tooltip.textStyle |
ツールチップのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
ツールチップが表示されるユーザー操作:
型: string
デフォルト: 「focus」
|
| vAxis |
メンバーがさまざまな垂直軸の要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
タイプ: オブジェクト
デフォルト: null
|
| vAxis.baseline |
タイプ: 数値
デフォルト: 自動
|
| vAxis.baselineColor |
縦軸のベースラインの色を指定します。任意の HTML 色文字列（例: タイプ: 数値
デフォルト: 'black'
|
| vAxis.direction |
縦軸の値の増加方向。デフォルトでは、低い値はグラフの下部に表示されます。値の順序を逆にするには、 タイプ: 1 または -1
デフォルト: 1
|
| vAxis.format |
数値軸ラベルの形式文字列。これは、ICU パターンセットのサブセットです。たとえば
ラベルに適用される実際の形式は、API の読み込み先のロケールから取得されます。詳細については、特定のロケールでのグラフの読み込みをご覧ください。
ティック値とグリッド線を計算する際に、関連するすべてのグリッドライン オプションの複数の組み合わせが考慮され、書式設定されたティックラベルが重複する場合、または重複する場合は代替が拒否されます。整数のティック値のみを表示する場合は 型: string
デフォルト: 自動
|
| vAxis.gridlines |
メンバーが縦軸にグリッド線を設定するオブジェクト。 縦軸のグリッド線は横方向に描画されます。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {color: '#333', minSpacing: 20}
タイプ: オブジェクト
デフォルト: null
|
| vAxis.gridlines.color |
グラフ領域内の垂直グリッド線の色有効な HTML 色の文字列を指定します。 型: string
デフォルト: '#CCC'
|
| vAxis.gridlines.count |
グラフ領域内の水平グリッド線のおおよその数。
タイプ: 数値
デフォルト: -1
|
| vAxis.gridlines.units |
グラフで計算されたグリッド線を使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。 一般的な形式は次のとおりです。
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]},
hours: {format: [/*format strings here*/]},
minutes: {format: [/*format strings here*/]},
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]}
}
}
詳細については、日付と時刻をご覧ください。 タイプ: オブジェクト
デフォルト: null
|
| vAxis.minorGridlines |
メンバーが垂直方向のマイナー グリッド線を構成するオブジェクト（vAxis.gridlines オプションと同様）。 タイプ: オブジェクト
デフォルト: null
|
| vAxis.minorGridlines.color |
グラフ領域内の縦方向のマイナー グリッド線の色。有効な HTML 色の文字列を指定します。 型: string
デフォルト: グリッド線と背景色のブレンド
|
| vAxis.minorGridlines.count |
マイナー Gridlines.count オプションはほとんど非推奨です。ただし、カウントを 0 に設定してマイナーグリッドラインを無効にする場合を除きます。マイナー グリッド線の数は、主要グリッド線（vAxis.gridlines.interval を参照）と最小要件スペース（vAxis.minorGridlines.minSpacing を参照）の間隔によって異なります。 タイプ: 数値
デフォルト: 1
|
| vAxis.minorGridlines.units |
グラフの計算のマイナー グリッドラインで使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。 一般的な形式は次のとおりです。
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
詳細については、日付と時刻をご覧ください。 タイプ: オブジェクト
デフォルト: null
|
| vAxis.logScale |
true の場合、縦軸は対数スケールになります。注: 値はすべて正数である必要があります。 型: boolean
デフォルト: false
|
| vAxis.scaleType |
型: string
デフォルト: null
|
| vAxis.textPosition |
グラフの軸を基準とした垂直軸のテキストの位置。サポートされている値: out、in、none。 型: string
デフォルト: 'out'
|
| vAxis.textStyle |
縦軸のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.ticks |
自動生成された Y 軸の目盛を、指定した配列に置換します。配列の各要素は、有効なティック値（数値、日付、日時、時刻など）またはオブジェクトのいずれかである必要があります。オブジェクトの場合は、ティック値用の
オーバーライドする 例:
型: 要素の配列
デフォルト: 自動
|
| vAxis.title |
垂直軸のタイトルを指定する 型: string
デフォルト: タイトルなし
|
| vAxis.titleTextStyle |
縦軸のタイトルのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.maxValue |
縦軸の最大値を指定値に移動します。これはほとんどのグラフで上方向になります。データの最大 Y 値よりも小さい値に設定されている場合は無視されます。
タイプ: 数値
デフォルト: 自動
|
| vAxis.minValue |
縦軸の最小値を指定の値に移動します。これはほとんどのグラフで下方向になります。データの最小 y 値より大きい値に設定されている場合は無視されます。
タイプ: 数値
デフォルト: null
|
| vAxis.viewWindowMode |
縦軸をスケーリングしてグラフ領域内の値をレンダリングする方法を指定します。次の文字列値がサポートされます。
型: string
デフォルト: 「tyly」と同じですが、使用される場合には
vaxis.viewWindow.min と vaxis.viewWindow.max が優先されます。 |
| vAxis.viewWindow |
縦軸の切り抜き範囲を指定します。 タイプ: オブジェクト
デフォルト: null
|
| vAxis.viewWindow.max |
レンダリングする垂直データの最大値。
タイプ: 数値
デフォルト: 自動
|
| vAxis.viewWindow.min |
レンダリングする垂直データの最小値。
タイプ: 数値
デフォルト: 自動
|
| width |
グラフの幅（ピクセル単位）です。 タイプ: 数値
デフォルト: 含まれる要素の幅
|
メソッド
| メソッド | |
|---|---|
draw(data, options) |
グラフを描画します。グラフでは、 戻り値の型: なし
|
getAction(actionID) |
リクエストされた 戻り値の型: オブジェクト
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。 戻り値の型: オブジェクト
|
getChartAreaBoundingBox() |
グラフのコンテンツの左側、上部、幅、高さを含むオブジェクトを返します（ラベルと凡例を除く）。
値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。 戻り値の型: オブジェクト
|
getChartLayoutInterface() |
グラフの画面上の配置とその要素に関する情報を含むオブジェクトを返します。 返されたオブジェクトで次のメソッドを呼び出すことができます。
グラフを描画した後に呼び出します。 戻り値の型: オブジェクト
|
getHAxisValue(xPosition, optional_axis_index) |
チャート コンテナの左端からのピクセル オフセットである （例: グラフを描画した後に呼び出します。 戻り値の型: number
|
getImageURI() |
画像 URI としてシリアル化されたグラフを返します。 グラフを描画した後に呼び出します。 PNG グラフを印刷するをご覧ください。 戻り値の型: 文字列
|
getSelection() |
選択したグラフ エンティティの配列を返します。選択可能なエンティティはバブルです。このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: 選択要素の配列
|
getVAxisValue(yPosition, optional_axis_index) |
縦方向のデータ値を （例: グラフを描画した後に呼び出します。 戻り値の型: number
|
getXLocation(dataValue, optional_axis_index) |
グラフのコンテナの左端からの （例: グラフを描画した後に呼び出します。 戻り値の型: number
|
getYLocation(dataValue, optional_axis_index) |
グラフのコンテナの上端からの （例: グラフを描画した後に呼び出します。 戻り値の型: number
|
removeAction(actionID) |
リクエストされた 戻り値の型:
none |
setAction(action) |
ユーザーがアクション テキストをクリックしたときに実行されるツールチップ アクションを設定します。
グラフの 戻り値の型:
none |
setSelection() |
指定されたグラフのエンティティを選択します。前の選択内容をすべてキャンセルします。
選択可能なエンティティはバブルです。このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: なし
|
clearChart() |
グラフをクリアし、割り当てられているすべてのリソースを解放します。 戻り値の型: なし
|
イベント
これらのイベントの使用方法について詳しくは、基本的なインタラクティビティ、イベントの処理、配信イベントをご覧ください。
| 名前 | |
|---|---|
animationfinish |
遷移アニメーションが完了すると呼び出されます。 プロパティ: なし
|
click |
ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。 プロパティ: targetID
|
error |
グラフのレンダリング中にエラーが発生しました。 プロパティ: ID、メッセージ
|
legendpagination |
ユーザーが凡例のページ分け矢印をクリックすると呼び出されます。現在の凡例にあるゼロベースのページ インデックスと、ページの総数を返します。 プロパティ: currentPageIndex、totalPages
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。バブルはデータテーブルの行と相関します（列インデックスは null です）。 プロパティ: 行、列
|
onmouseout |
ユーザーがビジュアル エンティティからマウスアウトすると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。バブルはデータテーブルの行と相関します（列インデックスは null です）。 プロパティ: 行、列
|
ready |
外部メソッド呼び出しのグラフの準備が完了しました。グラフを描画し、描画後にメソッドを呼び出す場合は、 プロパティ: なし
|
select |
ユーザーがビジュアル エンティティをクリックすると呼び出されます。選択内容を確認するには、 プロパティ: なし
|
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。