概要
Google 棒グラフは、ユーザーのブラウザに適した SVG または VML を使用してブラウザに表示されます。すべての Google グラフと同様に、棒グラフではデータにカーソルを合わせるとツールチップが表示されます。このグラフの縦棒グラフについては、縦棒グラフをご覧ください。
例
カラーバー
4 つの貴金属の密度をグラフ化してみましょう。
上の例では、すべての色がデフォルトの青です。これらはすべて同じシリーズの一部であるため、2 つ目のシリーズがある場合は赤色になります。これらの色は、スタイルロールでカスタマイズできます。
色を選択するには 3 通りの方法があります。データテーブルには、RGB 値、英語の色名、CSS に似た宣言のすべてを示しています。
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'], // RGB value
['Silver', 10.49, 'silver'], // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
棒のスタイル
スタイルロールを使用すると、CSS と同様の宣言でバーの外観をコントロールできます。
coloropacityfill-colorfill-opacitystroke-colorstroke-opacitystroke-width
グラフ内でスタイルを自由に組み合わせる（スタイルを選択してそれに従う）ことはおすすめしませんが、すべてのスタイル属性を説明するために、以下にサンプラーを示します。
最初の 2 本のバーはそれぞれ特定の color を使用します（最初のバーは英語の名前、2 番目のバーは RGB 値です）。opacity は選択されていないため、デフォルトの 1.0（完全に不透明）が使用されます。2 つ目の棒が背後のグリッド線を隠しているのはそのためです。3 つ目の棒では opacity を 0.2 に指定して、グリッド線を表示しています。4 つ目の棒では、stroke-color と stroke-width の 3 つのスタイル属性を使って枠線を描画し、fill-color で内側の長方形の色を指定します。右端のバーではさらに、stroke-opacity と fill-opacity を使用して、枠線と塗りつぶしの不透明度を選択します。
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Visitations', { role: 'style' } ],
['2010', 10, 'color: gray'],
['2020', 14, 'color: #76A7FA'],
['2030', 16, 'opacity: 0.2'],
['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
]);
ラベルバー
グラフには、目盛りラベル、凡例ラベル、ツールチップのラベルなど、数種類のラベルがあります。このセクションでは、棒グラフの棒の内側（または近く）にラベルを配置する方法について説明します。
たとえば、各棒に適切な化学記号でアノテーションを付けるとします。そのためには、annotation ロールを使用します。
データテーブルで、{ role:
'annotation' } を使用して新しい列を定義し、バーラベルを保持します。
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
['Copper', 8.94, '#b87333', 'Cu' ],
['Silver', 10.49, 'silver', 'Ag' ],
['Gold', 19.30, 'gold', 'Au' ],
['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
]);
ユーザーがバーにカーソルを合わせるとデータ値を確認できますが、バー自体に値を含めることもできます。
これは、各バーのアノテーションを指定する DataView を作成するため、本来よりも少し複雑になります。
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>
値を異なる形式にする場合は、フォーマッタを定義して、次のような関数でラップできます。
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
次に、calc: getValueAt.bind(undefined, 1) で呼び出すことができます。
ラベルが大きすぎてバー内に完全に収まらない場合は、ラベルが外側に表示されます。
積み上げ横棒グラフ
積み上げ横棒グラフは、関連する値を重ねて配置する棒グラフです。負の値がある場合、グラフの軸のベースラインの下に逆の順序で積み重ねられます。積み上げ横棒グラフは、通常、カテゴリが自然にコンポーネントに分割される場合に使用します。たとえば、架空の書籍販売をジャンル別に分割し、時系列で比較するとします。
積み上げ棒グラフを作成するには、isStacked オプションを true に設定します。
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true
};
積み上げ棒グラフも 100% 積み上げに対応しています。各ドメイン値の要素のスタックは、合計が 100% になるように再スケーリングされます。オプションは isStacked: 'percent' で、各値を 100% の割合で書式設定します。isStacked: 'relative' では、各値を 1 の小数として書式設定します。isStacked: 'absolute' オプションもあります。これは機能的に isStacked: true と同等です。
右側の 100% 積み上げグラフでは、目盛りの値は 0 ～ 1 の相対的なスケールに基づいて 1 の分数として示されていますが、軸の値はパーセンテージで表示されます。これは、パーセンテージ軸の目盛りが相対的な 0 ～ 1 のスケール値に「#.##%」という形式を適用した結果であるためです。isStacked: 'percent' を使用する場合は、0 ～ 1 の相対的なスケールで目盛りを指定してください。
var options_stacked = {
isStacked: true,
height: 300,
legend: {position: 'top', maxLines: 3},
hAxis: {minValue: 0}
};
var options_fullStacked = {
isStacked: 'percent',
height: 300,
legend: {position: 'top', maxLines: 3},
hAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
マテリアル棒グラフの作成
Google は 2014 年に、Google プラットフォーム上で実行される Google のプロパティとアプリ（Android アプリなど）全体で共通のデザインをサポートすることを目的としたガイドラインを発表しました。この取り組みを、マテリアル デザインと呼んでいます。Google では、すべてのコアチャートの「マテリアル」バージョンを提供します。見た目が気に入ったら、それらを使用しても構いません。
マテリアル棒グラフの作成は、いわゆる「クラシック」棒グラフの作成に似ています。Google 可視化 API を読み込み（ただし 'corechart' パッケージではなく 'bar' パッケージを使用します）、データテーブルを定義してから、オブジェクトを作成します（ただし、google.visualization.BarChart ではなく google.charts.Bar クラスです）。
注: 古いバージョンの Internet Explorer では、マテリアル グラフは機能しません。（IE8 以前のバージョンは、マテリアル チャートで要求される SVG をサポートしていません）。
マテリアル棒グラフでは、カラーパレットの改善、角の丸み、ラベルの書式の明確化、系列間のデフォルトの間隔の厳格化、グリッド線とタイトルの柔らかさ（および字幕の追加）など、従来の棒グラフと比べて多くの点が改善されています。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
マテリアル チャートはベータ版です。デザインとインタラクティビティはほぼ完成していますが、クラシック グラフで使用可能なオプションの多くはまだ利用できません。まだサポートされていないオプションの一覧については、この問題をご覧ください。
また、オプションの宣言方法は確定していないため、従来のオプションを使用している場合は、次の行をマテリアル オプションに変換する必要があります。
chart.draw(data, options);
...次の行を
chart.draw(data, google.charts.Bar.convertOptions(options));
google.charts.Bar.convertOptions() を使用すると、hAxis/vAxis.format プリセット オプションなどの特定の機能を利用できます。
Dual-X グラフ
注: デュアル X 軸はマテリアル チャート（つまり、パッケージ bar のチャート）でのみ使用できます。
2 つの独立した X 軸（ある系列の上部軸と下部軸）を持つ 2 つの系列を棒グラフに表示できます。
2 つの X 軸のラベル（「パース」と「見かけの大きさ」）が異なるだけでなく、それぞれに独自のスケールとグリッド線があります。この動作をカスタマイズする場合は、hAxis.gridlines オプションを使用します。
以下のコードでは、axes オプションと series オプションを組み合わせてグラフのデュアル X 表示を指定しています。series オプションは、それぞれに使用する軸を指定します（'distance' と 'brightness'。データテーブルの列名と関係がある必要はありません）。次に、axes オプションにより、このグラフがデュアル X グラフになり、'apparent magnitude' 軸が上部、'parsecs' 軸が下部に配置されます。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
トップ X チャート
注: 上 X 軸はマテリアル チャート（つまり、bar パッケージのチャート）でのみ使用できます。
X 軸のラベルとタイトルをグラフの下ではなく上部に配置する場合は、マテリアル グラフで axes.x オプションを使用します。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
読み込んでいます
google.charts.load パッケージ名は "corechart" です。ビジュアリゼーションのクラス名は google.visualization.BarChart です。
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.BarChart(container);
マテリアル棒グラフの場合、google.charts.load パッケージ名は "bar" です。ビジュアリゼーションのクラス名は google.charts.Bar です。
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
データ形式
行: 表の各行はバーのグループを表します。
Columns:
| 列 0 | 列 1 | ... | 列 N | |
|---|---|---|---|---|
| 目的: |
|
このグループのバー 1 の値 | ... | このグループの N 個の値を示すバー |
| データ型: | 数値 | ... | 数値 | |
| ロール: | ドメイン | データ | ... | データ |
| オプションの列のロール: | ... |
構成オプション
| 名前 | |
|---|---|
| animation.duration |
アニメーションの再生時間（ミリ秒単位）。詳細については、アニメーションのドキュメントをご覧ください。 タイプ: 数値
デフォルト: 0
|
| animation.easing |
アニメーションに適用されるイージング関数。以下のオプションを使用できます。
型: string
デフォルト: 「linear」
|
| animation.startup |
最初の描画でグラフをアニメーション表示するかどうかを指定します。 型: boolean
デフォルト: false
|
| annotations.alwaysOutside |
棒グラフと
縦棒グラフで、 型: boolean
デフォルト: false
|
| annotations.datum |
アノテーションをサポートするグラフの場合、
annotations.datum オブジェクトを使用すると、個々のデータ要素（棒グラフの各バーに表示される値など）に指定されたアノテーションの Google Charts の選択をオーバーライドできます。色は annotations.datum.stem.color、ステムの長さは annotations.datum.stem.length、スタイルは annotations.datum.style で制御できます。タイプ: オブジェクト
デフォルト: 色は「black」、長さは 12 文字、スタイルは「point」です。
|
| annotations.domain |
アノテーションをサポートするグラフの場合、
annotations.domain オブジェクトを使用すると、ドメイン（一般的な折れ線グラフの X 軸などグラフの主軸）に指定されたアノテーションの Google Charts の選択をオーバーライドできます。色は annotations.domain.stem.color、ステムの長さは annotations.domain.stem.length、スタイルは annotations.domain.style で制御できます。タイプ: オブジェクト
デフォルト: 色は「黒」、長さは 5、スタイルは「point」です。
|
| annotations.boxStyle |
アノテーションをサポートするグラフの場合、
var options = {
annotations: {
boxStyle: {
// Color of the box outline.
stroke: '#888',
// Thickness of the box outline.
strokeWidth: 1,
// x-radius of the corner curvature.
rx: 10,
// y-radius of the corner curvature.
ry: 10,
// Attributes for linear gradient fill.
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
}
}
}
};
このオプションは現在、面グラフ、横棒グラフ、縦棒グラフ、複合グラフ、折れ線グラフ、散布図でサポートされています。アノテーション チャートではサポートされていません。 タイプ: オブジェクト
デフォルト: null
|
| annotations.highContrast |
アノテーションをサポートするグラフの場合、
annotations.highContrast ブール値を使用すると、Google グラフで選択されたアノテーションの色をオーバーライドできます。デフォルトでは、annotations.highContrast が true に設定されているため、グラフはコントラストの強いアノテーションの色（暗い背景では明るい色、明るい色では暗い）が選択されます。annotations.highContrast を false に設定し、独自のアノテーション色を指定しない場合、Google グラフではアノテーションにデフォルトの系列色が使用されます。型: boolean
デフォルト: true
|
| annotations.stem |
アノテーションをサポートするグラフの場合、
annotations.stem オブジェクトを使用すると、Google Chart のステムスタイル選択をオーバーライドできます。色は annotations.stem.color で制御し、ステムの長さは annotations.stem.length で制御できます。なお、ステムの長さのオプションは、スタイル 'line' のアノテーションには影響しません。'line' データム アノテーションの場合、ステムの長さは常にテキストと同じです。'line' ドメイン アノテーションの場合、ステムはチャート全体にわたってます。タイプ: オブジェクト
デフォルト: 色は「black」です。長さは、ドメイン アノテーションの場合は 5、データム アノテーションの場合は 12 です。
|
| annotations.style |
アノテーションをサポートするグラフの場合、
annotations.style オプションを使用すると、Google Chart によるアノテーション タイプの選択をオーバーライドできます。'line' または 'point' のいずれかになります。型: string
デフォルト: 「point」
|
| annotations.textStyle |
アノテーションをサポートするグラフの場合、
annotations.textStyle オブジェクトによってアノテーションのテキストの外観が制御されます。
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
// The color of the text.
color: '#871b47',
// The color of the text outline.
auraColor: '#d799ae',
// The transparency of the text.
opacity: 0.8
}
}
};
このオプションは現在、面グラフ、横棒グラフ、縦棒グラフ、複合グラフ、折れ線グラフ、散布図でサポートされています。 アノテーション チャート ではサポートされていません。 タイプ: オブジェクト
デフォルト: null
|
| axisTitlesPosition |
軸のタイトルを配置する場所（グラフ領域と比較）。サポートされている値:
型: string
デフォルト: 「out」
|
| backgroundColor |
グラフのメイン領域の背景色。単純な HTML カラー文字列（ タイプ: 文字列またはオブジェクト
デフォルト: 「white」
|
| backgroundColor.stroke |
グラフの枠線の色。HTML のカラー文字列で指定します。 型: string
デフォルト: 「#666」
|
| backgroundColor.strokeWidth |
枠線の幅（ピクセル単位）。 タイプ: 数値
デフォルト: 0
|
| backgroundColor.fill |
グラフの塗りつぶしの色。HTML の色文字列で指定します。 型: string
デフォルト: 「white」
|
| bar.groupWidth |
バーのグループの幅。次のいずれかの形式で指定します。
タイプ: 数値または文字列
デフォルト: 黄金比（約 61.8%）
|
| 棒 |
マテリアル棒グラフのバーが垂直か水平か。このオプションは、従来の棒グラフと従来の縦棒グラフには影響しません。 タイプ: 「horizontal」または「vertical」
デフォルト: 「vertical」
|
| chartArea |
グラフ領域（グラフ自体が描画される場所。軸と凡例を除く）の配置とサイズを構成するメンバーを持つオブジェクト。サポートされている形式は、数字、または数字の後に % が続く形式です。単純な数字はピクセル単位の値で、数字の後に % を続けるとパーセンテージになります。例: タイプ: オブジェクト
デフォルト: null
|
| chartArea.backgroundColor |
グラフ領域の背景色。文字列を使用する場合は、16 進数文字列（例:「#fdc」）、英語の色の名前）を使用できます。オブジェクトを使用する場合は、次のプロパティを指定できます。
タイプ: 文字列またはオブジェクト
デフォルト: 「white」
|
| chartArea.left |
左の枠線からグラフを描画する距離。 タイプ: 数値または文字列
デフォルト: auto
|
| chartArea.top |
上枠線からグラフを描画する距離。 タイプ: 数値または文字列
デフォルト: auto
|
| chartArea.width |
グラフ領域の幅。 タイプ: 数値または文字列
デフォルト: auto
|
| chartArea.height |
グラフ領域の高さ。 タイプ: 数値または文字列
デフォルト: auto
|
| chart.subtitle |
マテリアル グラフの場合、このオプションではサブタイトルを指定します。字幕に対応しているのはマテリアル チャートのみです。 型: string
デフォルト: null
|
| chart.title |
マテリアル グラフの場合、このオプションではタイトルを指定します。 型: string
デフォルト: null
|
| 色 |
グラフの要素に使用する色。文字列の配列。各要素は HTML カラー文字列です（例: 型: 文字列の配列
デフォルト: デフォルトの色
|
| dataOpacity |
データポイントの透明度。1.0 は完全に不透明、0.0 は完全透明です。散布図、ヒストグラム、棒グラフ、縦棒グラフでは、表示されるデータのことを指し、散布図では点が表示され、それ以外は長方形になります。折れ線グラフや面グラフなど、データの選択によって点が表示されるグラフでは、カーソルを合わせるか選択したときに表示される円を指します。複合グラフは両方の動作を示します。このオプションは他のグラフには影響しません。（トレンドラインの不透明度を変更するには、 トレンドラインの不透明度 をご覧ください）。 タイプ: 数値
デフォルト: 1.0
|
| enableInteractivity |
グラフがユーザーベースのイベントをスローするか、ユーザー操作に反応するかを示します。false の場合、グラフは「select」などのインタラクション ベースのイベントをスローしません（ただし、Ready イベントや error イベントはスローされます）。また、ホバーテキストを表示したり、ユーザー入力に応じて変化したりしません。 型: boolean
デフォルト: true
|
| explorer |
この機能は試験運用版であり、今後のリリースで変更される可能性があります。 注: エクスプローラでは、連続した軸（数値や日付など）しか使用できません。 タイプ: オブジェクト
デフォルト: null
|
| explorer.actions |
Google グラフ エクスプローラでは、次の 3 つの操作がサポートされています。
型: 文字列の配列
デフォルト: ['dragToPan', 'rightClickToReset']
|
| explorer.axis |
デフォルトでは、 型: string
デフォルト: 水平方向と垂直方向の両方へのパン
|
| explorer.keepInBounds |
デフォルトでは、データの場所に関係なく、ユーザーは全体をパンできます。ユーザーが元のグラフを超えてパンしないようにするには、 型: boolean
デフォルト: false
|
| explorer.maxZoomIn |
エクスプローラーがズームインできる最大値です。デフォルトでは、元のビューの 25% のみが表示されるようにズームインできます。 タイプ: 数値
デフォルト: 0.25
|
| explorer.maxZoomOut |
エクスプローラーがズームアウトできる最大値です。デフォルトでは、グラフが利用可能なスペースの 4 分の 1 を占める程度にズームアウトできます。 タイプ: 数値
デフォルト: 4
|
| explorer.zoomDelta |
ユーザーがズームインまたはズームアウトするときに、 タイプ: 数値
デフォルト: 1.5
|
| focusTarget |
マウスオーバーでフォーカスを受け取るエンティティのタイプ。マウスクリックで選択されるエンティティや、イベントに関連付けられるデータテーブル要素にも影響します。次のいずれか 1 つを指定できます。
focusTarget の「category」では、ツールチップにすべてのカテゴリ値が表示されます。これは、異なる系列の値を比較する場合に便利です。 型: string
デフォルト: 'datum'
|
| fontSize |
グラフ内のすべてのテキストのデフォルトのフォントサイズ（ピクセル単位）。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 タイプ: 数値
デフォルト: 自動
|
| fontName |
グラフのすべてのテキストに使用されるデフォルトのフォントです。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 型: string
デフォルト: 「Arial」
|
| forceIFrame |
インライン フレーム内にグラフを描画します。（IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます）。 型: boolean
デフォルト: false
|
| hAxes |
グラフに複数の水平軸がある場合は、個々の水平軸のプロパティを指定します。各子オブジェクトは
複数の横軸を持つグラフを指定するには、まず
このプロパティはオブジェクトまたは配列のいずれかです。オブジェクトはオブジェクトの集まりであり、各オブジェクトには、定義する軸を指定する数値ラベルが付けられています。これは上記の形式です。配列は、軸ごとに 1 つのオブジェクトの配列です。たとえば、次の配列スタイルの表記は、上記の
hAxes: {
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {
color: 'red'
}
} // Axis 1
型: オブジェクトの配列、または子オブジェクトを持つオブジェクト
デフォルト: null
|
| hAxis |
さまざまな横軸の要素を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
タイプ: オブジェクト
デフォルト: null
|
| hAxis.baseline |
横軸のベースライン。 タイプ: 数値
デフォルト: 自動
|
| hAxis.baselineColor |
横軸のベースラインの色。任意の HTML カラー文字列（例: タイプ: 数値
デフォルト: 「black」
|
| hAxis.direction |
横軸での値の増加の方向。値の順序を逆にするには、 タイプ: 1 または -1
デフォルト: 1
|
| hAxis.format |
数値軸のラベルの形式文字列。これは、
ICU パターンセット
のサブセットです。たとえば、
ラベルに適用される実際の書式は、API を読み込んだ際の言語 / 地域に基づきます。詳しくは、 特定のロケールでのグラフの読み込み をご覧ください。
目盛り値とグリッド線の計算では、関連するすべてのグリッド線オプションの代替の組み合わせが検討され、フォーマットされた目盛りラベルが重複または重複する場合は、代替案は拒否されます。そのため、整数の目盛り値のみを表示する場合は 型: string
デフォルト: auto
|
| hAxis.gridlines |
横軸のグリッド線を構成するプロパティを持つオブジェクト。 横軸のグリッド線は垂直方向に描画されます。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {color: '#333', minSpacing: 20}
タイプ: オブジェクト
デフォルト: null
|
| hAxis.gridlines.color |
グラフ領域内の水平グリッド線の色。有効な HTML カラー文字列を指定します。 型: string
デフォルト: 「#CCC」
|
| hAxis.gridlines.count |
グラフ領域内の水平グリッド線のおおよその数。
タイプ: 数値
デフォルト: -1
|
| hAxis.gridlines.units |
グラフで計算されたグリッド線で使用する場合、日付/日時/timeofday データ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時、分、秒、ミリ秒の書式設定を許可します。 一般的な形式は次のとおりです。
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 |
カウントを 0 に設定してマイナー グリッドラインを無効にする場合を除き、 タイプ: 数値
デフォルト: 1
|
| hAxis.minorGridlines.units |
グラフで計算されたマイナー グリッドラインで使用される場合、日付/日時/timeofday データ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時、分、秒、ミリ秒の書式設定を許可します。 一般的な形式は次のとおりです。
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.textStyle |
横軸のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.textPosition |
グラフ領域に対する横軸のテキストの位置。サポートされている値: out、in、none。 型: string
デフォルト: 「out」
|
| hAxis.ticks |
自動生成された X 軸の目盛りを、指定した配列に置き換えます。配列の各要素は、有効な目盛り値（数値、日付、日時、timeofday など）またはオブジェクトである必要があります。オブジェクトの場合は、目盛り値の
例:
型: 要素の配列
デフォルト: auto
|
| 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
デフォルト: 「pretty」と同じですが、使用した場合、
haxis.viewWindow.min と haxis.viewWindow.max が優先されます。
|
| hAxis.viewWindow |
横軸の切り抜き範囲を指定します。 タイプ: オブジェクト
デフォルト: null
|
| hAxis.viewWindow.max |
レンダリングする水平方向データの最大値。
タイプ: 数値
デフォルト: auto
|
| hAxis.viewWindow.min |
レンダリングする水平データの最小値。
タイプ: 数値
デフォルト: auto
|
| 身長 |
グラフの高さ（ピクセル単位）。 タイプ: 数値
デフォルト: 含まれる要素の高さ
|
| isStacked |
true に設定した場合、各ドメイン値ですべてのシリーズの要素がスタックされます。注: 列グラフ、エリアグラフ、SteppedArea グラフでは、Google Charts では、系列要素のスタックに合わせて凡例の項目の順序が逆になっています（たとえば、系列 0 は最下端の凡例項目になります）。これは、棒グラフには 適用されません 。
100% スタッキングの場合、各要素の計算値は、ツールチップ内の実際の値の後に表示されます。
ターゲット軸はデフォルトで、相対値 0 ～ 1 のスケールに基づく目盛り値が
100% スタッキングは タイプ: ブール値/文字列
デフォルト: false
|
| 凡例 |
凡例のさまざまな要素を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
タイプ: オブジェクト
デフォルト: null
|
| legend.pageIndex |
凡例の最初に選択されたゼロベースのページ インデックス。 タイプ: 数値
デフォルト: 0
|
| legend.position |
凡例の位置。次のいずれか 1 つを指定できます。
型: string
デフォルト: 「right」
|
| legend.alignment |
凡例の配置。次のいずれか 1 つを指定できます。
開始、中央、終了は、凡例のスタイル（垂直または水平）に関連します。たとえば、「right」の凡例では「start」と「end」がそれぞれ上下に配置されます。「top」の凡例では、「start」と「end」はそれぞれ領域の左右にあります。 デフォルト値は、凡例の位置によって異なります。「ボトム」の凡例のデフォルトは「center」です。その他の凡例のデフォルトは「start」です。 型: string
デフォルト: 自動
|
| legend.textStyle |
凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| reverseCategories |
true に設定した場合、下から上に系列が描画されます。デフォルトでは、上から下に描画されます。 型: boolean
デフォルト: false
|
| 画面の向き |
グラフの向き。 型: string
デフォルト: 'horizontal'
|
| シリーズ |
オブジェクトの配列で、それぞれがグラフ内の対応する系列の形式を表します。系列に対してデフォルト値を使用するには、空のオブジェクト {} を指定します。系列または値が指定されていない場合は、グローバル値が使用されます。各オブジェクトは次のプロパティをサポートしています。
オブジェクトの配列（それぞれが指定された順序でシリーズに適用される）を指定することも、それぞれの子にどのシリーズを適用するかを示す数値キーを持つオブジェクトを指定することもできます。たとえば、次の 2 つの宣言は同じです。1 つ目のシリーズは黒で凡例に存在しないため、4 つ目のシリーズは赤色で凡例に存在しないことが宣言されています。
series: [
{color: 'black', visibleInLegend: false}, {}, {},
{color: 'red', visibleInLegend: false}
]
series: {
0:{color: 'black', visibleInLegend: false},
3:{color: 'red', visibleInLegend: false}
}
型: オブジェクトの配列、またはネストされたオブジェクトを含むオブジェクト
デフォルト: {}
|
| テーマ |
テーマとは、グラフの特定の動作や視覚効果を実現するために連携して機能する、事前定義されたオプション値のセットです。現時点で使用できるテーマは 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.ignoreBounds |
注: これは HTML ツールチップにのみ適用されます。SVG ツールチップで有効にすると、グラフの境界外のオーバーフローは切り抜かれます。詳細については、ツールチップのコンテンツのカスタマイズをご覧ください。 タイプ: ブール値
デフォルト: false
|
| tooltip.isHtml |
true に設定した場合、SVG 表示ではなく HTML 表示のツールチップが使用されます。詳細については、ツールチップのコンテンツのカスタマイズをご覧ください。 注: ツールチップ列のデータロールによる HTML ツールチップ コンテンツのカスタマイズは、バブルチャートの可視化ではサポートされていません。 型: boolean
デフォルト: false
|
| tooltip.showColorCode |
true の場合、ツールチップのシリーズ情報の横に色付きの正方形が表示されます。 型: boolean
デフォルト: 自動
|
| 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」
|
| トレンドライン |
対応するグラフに
トレンドライン
が表示されます。デフォルトでは線形トレンドラインが使用されますが、
トレンドラインはシリーズごとに指定されるため、ほとんどの場合、オプションは次のようになります。
var options = {
trendlines: {
0: {
type: 'linear',
color: 'green',
lineWidth: 3,
opacity: 0.3,
showR2: true,
visibleInLegend: true
}
}
}
タイプ: オブジェクト
デフォルト: null
|
| trendlines.n.color |
トレンドライン の色。英語の色名または 16 進文字列で表します。 型: string
デフォルト: デフォルトのシリーズの色
|
| trendlines.n.degree |
タイプ: 数値
デフォルト: 3
|
| trendlines.n.labelInLegend |
設定すると、 トレンドライン がこの文字列として凡例に表示されます。 型: string
デフォルト: null
|
| trendlines.n.lineWidth |
トレンドライン の線幅（ピクセル単位）。 タイプ: 数値
デフォルト: 2
|
| trendlines.n.opacity |
トレンドライン の透明度を 0.0（透明）～ 1.0（不透明）で指定します。 タイプ: 数値
デフォルト: 1.0
|
| trendlines.n.pointSize |
トレンドライン
は、グラフ上に多数のドットを打つことで作成されます。このほとんどは必要ないオプションであり、ドットのサイズをカスタマイズできます。通常は、トレンドラインの タイプ: 数値
デフォルト: 1
|
| trendlines.n.pointsVisible |
トレンドライン
は、グラフ上に多数のドットを付けることで作成されます。トレンドラインの 型: boolean
デフォルト: true
|
| trendlines.n.showR2 |
凡例またはトレンドラインのツールチップに 決定係数 を表示するかどうかを指定します。 型: boolean
デフォルト: false
|
| trendlines.n.type |
トレンドライン
が 型: string
デフォルト: linear
|
| trendlines.n.visibleInLegend |
トレンドライン の方程式を凡例に表示するかどうか。（トレンドラインのツールチップに表示されます）。 型: boolean
デフォルト: false
|
| vAxis |
さまざまな縦軸の要素を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
タイプ: オブジェクト
デフォルト: null
|
| vAxis.baseline |
このオプションは、 タイプ: 数値
デフォルト: 自動
|
| vAxis.baselineColor |
縦軸のベースラインの色を指定します。任意の HTML カラー文字列（例:
このオプションは、 タイプ: 数値
デフォルト: 「black」
|
| vAxis.direction |
縦軸での値の増加の方向。デフォルトでは、低い値はグラフの下部に表示されます。値の順序を逆にするには、 タイプ: 1 または -1
デフォルト: 1
|
| vAxis.format |
数値軸または日付軸のラベルの形式文字列。
数値軸のラベルの場合、これは小数形式の
ICU パターンセット
のサブセットです。たとえば、
日付軸のラベルの場合、これは日付形式の
ICU パターンセット
のサブセットです。たとえば、 ラベルに適用される実際の書式は、API を読み込んだ際の言語 / 地域に基づきます。詳しくは、 特定のロケールでのグラフの読み込み をご覧ください。
目盛り値とグリッド線の計算では、関連するすべてのグリッド線オプションの代替の組み合わせが検討され、フォーマットされた目盛りラベルが重複または重複する場合は、代替案は拒否されます。そのため、整数の目盛り値のみを表示する場合は
このオプションは、 型: string
デフォルト: auto
|
| vAxis.gridlines |
縦軸のグリッド線を構成するメンバーを持つオブジェクト。 縦軸のグリッド線は横方向に描画されます。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {color: '#333', minSpacing: 20}
このオプションは、 タイプ: オブジェクト
デフォルト: null
|
| vAxis.gridlines.color |
グラフ領域内の垂直グリッド線の色。有効な HTML カラー文字列を指定します。 型: string
デフォルト: 「#CCC」
|
| vAxis.gridlines.count |
グラフ領域内の水平グリッド線のおおよその数。
タイプ: 数値
デフォルト: -1
|
| vAxis.gridlines.units |
グラフで計算されたグリッド線で使用する場合、日付/日時/timeofday データ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時、分、秒、ミリ秒の書式設定を許可します。 一般的な形式は次のとおりです。
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 |
minimumGridlines.count オプションは、count を 0 に設定してマイナー グリッドラインを無効にする場合を除き、ほぼ非推奨となりました。マイナー グリッド線の数は、主要グリッド線の間隔（vAxis.gridlines.interval を参照）と必要最小限のスペース（vAxis.minorGridlines.minSpacing を参照）によって異なります。 タイプ: 数値
デフォルト: 1
|
| vAxis.minorGridlines.units |
グラフで計算されたマイナー グリッドラインで使用される場合、日付/日時/timeofday データ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時、分、秒、ミリ秒の書式設定を許可します。 一般的な形式は次のとおりです。
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 軸の目盛りを、指定した配列に置き換えます。配列の各要素は、有効な目盛り値（数値、日付、日時、timeofday など）またはオブジェクトである必要があります。オブジェクトの場合は、目盛り値の
例:
このオプションは、 型: 要素の配列
デフォルト: auto
|
| 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
デフォルト: 「pretty」と同じですが、使用した場合、
vaxis.viewWindow.min と vaxis.viewWindow.max が優先されます。
|
| vAxis.viewWindow |
縦軸の切り抜き範囲を指定します。 タイプ: オブジェクト
デフォルト: null
|
| vAxis.viewWindow.max |
タイプ: 数値
デフォルト: auto
|
| vAxis.viewWindow.min |
タイプ: 数値
デフォルト: auto
|
| 幅 |
グラフの幅（ピクセル単位）。 タイプ: 数値
デフォルト: 含まれる要素の幅
|
メソッド
| メソッド | |
|---|---|
draw(data, options) |
グラフを描画します。グラフは、 戻り値の型: none
|
getAction(actionID) |
リクエストされた 戻り値の型: オブジェクト
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナを基準とします。グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getChartAreaBoundingBox() |
グラフ コンテンツの左、上、幅、高さを含むオブジェクトを返します（ラベルと凡例を除く）。
値はグラフのコンテナを基準とします。グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getChartLayoutInterface() |
グラフの画面上の位置とその要素に関する情報を含むオブジェクトを返します。 返されたオブジェクトに対して、次のメソッドを呼び出すことができます。
グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getHAxisValue(xPosition, optional_axis_index) |
例: グラフが描画された後に呼び出されます。 戻り値の型: number
|
getImageURI() |
画像の URI としてシリアル化されたグラフを返します。 グラフが描画された後に呼び出されます。 PNG チャートの印刷をご覧ください。 戻り値の型: string
|
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 つのエンティティしか選択できません。
戻り値の型: none
|
clearChart() |
チャートを消去し、割り当て済みリソースをすべて解放します。 戻り値の型: none
|
イベント
これらのイベントの使用方法について詳しくは、基本的なインタラクティビティ、イベントの処理、イベントを発生させるをご覧ください。
| 名前 | |
|---|---|
animationfinish |
遷移アニメーションの完了時に呼び出されます。 Properties（プロパティ）: なし
|
click |
ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。 プロパティ: targetID
|
error |
グラフのレンダリング中にエラーが発生したときに呼び出されます。 プロパティ: id、message
|
legendpagination |
ユーザーが凡例のページ分け用の矢印をクリックすると呼び出されます。現在の凡例のゼロベースのページ インデックスと総ページ数を返します。 プロパティ: currentPageIndex、totalPages
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に関連付けられます（列インデックスが null）。 プロパティ: row、column
|
onmouseout |
ユーザーがビジュアル エンティティからマウス離れたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に関連付けられます（列インデックスが null）。 プロパティ: row、column
|
ready |
グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、 Properties（プロパティ）: なし
|
select |
ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、 Properties（プロパティ）: なし
|
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。