概要
SVG または VML を使用してブラウザ内にレンダリングされる面グラフ。 ポイントにカーソルを合わせたときにヒントを表示します。
簡単な例
<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([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
スタッキング領域
デフォルトでは、面グラフは系列を重ねて表示します。代わりに積み重ねれば、各 x 値のデータ値が合計されます。面グラフでは、各系列の値は前の系列値に対して常に積み上げられます。負の値と正の値を組み合わせて積み重ねると、領域が重なってしまいます。なお、interpolateNulls オプションは積み上げ面グラフでは機能しません。
左側では isStacked が false（デフォルト）、右側では true に設定されています。
凡例のエントリの順序は異なることに注意してください。2 つ目の積み上げグラフでは、順序が逆になり、系列 0 が一番下に配置されます。これにより、系列要素の積み重ねに合わせて、凡例とデータが対応付けられます。
積み上げ面グラフも 100% 積み上げに対応しています。各ドメイン値の要素のスタックは、合計が 100% になるように再スケーリングされます。オプションは isStacked: 'percent' で、各値を 100% の割合で書式設定します。isStacked: 'relative' では、各値を 1 の小数として書式設定します。isStacked: 'absolute' オプションもあります。これは機能的に isStacked: true と同等です。
右側の 100% 積み上げグラフでは、目盛りの値は、相対的な 0 ～ 1 のスケールを 1 の分数で表したものです。
var options_stacked = {
isStacked: true,
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {minValue: 0}
};
var options_fullStacked = {
isStacked: 'relative',
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
いずれかの系列で、一部の x 値のデータがないとします。たとえば、上のグラフで、ドローンは 2015 年まで購入できず、セグウェイは 2014 年から販売しないと仮定します。データがない場合は null 値を使用するため、グラフは次のようになります。
このような不連続性が問題にならない場合は、null をゼロに置き換えるか、interpolateNulls オプションを true に設定します。
読み込んでいます
google.charts.load パッケージ名は "corechart". です。
google.charts.load("current", {packages: ["corechart"]});
ビジュアリゼーションのクラス名は google.visualization.AreaChart です。
var visualization = new google.visualization.AreaChart(container);
データ形式
行: テーブルの各行は、同じ X 軸の位置を持つデータポイントのセットを表します。
Columns:
| 列 0 | 列 1 | ... | 列 N | |
|---|---|---|---|---|
| 目的: |
|
行 1 の値 | ... | 行 N の値 |
| データ型: | 数値 | ... | 数値 | |
| ロール: | ドメイン | データ | ... | データ |
| オプションの列ロール: | ... |
構成オプション
| 名前 | |
|---|---|
| aggregationTarget |
複数のデータ選択をツールチップに統合する方法:
多くの場合、
aggregationTarget は selectionMode および tooltip.trigger と組み合わせて使用されます。次に例を示します。
var options = {
// Allow multiple
// simultaneous selections.
selectionMode: 'multiple',
// Trigger tooltips
// on selections.
tooltip: {trigger: 'selection'},
// Group selections
// by x-value.
aggregationTarget: 'category',
};
型: string
デフォルト: 「auto」
|
| animation.duration |
アニメーションの再生時間（ミリ秒単位）。詳細については、アニメーションのドキュメントをご覧ください。 タイプ: 数値
デフォルト: 0
|
| animation.easing |
アニメーションに適用されるイージング関数。以下のオプションを使用できます。
型: string
デフォルト: 「linear」
|
| animation.startup |
最初の描画でグラフをアニメーション表示するかどうかを指定します。 型: boolean
デフォルト: false
|
| 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.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.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
|
| areaOpacity |
面グラフ系列の下の色付きの領域のデフォルトの不透明度。0.0 は完全な透明、1.0 は完全な不透明です。個々のシリーズに不透明度を指定するには、 型: 数値（0.0 ～ 1.0）
デフォルト: 0.3
|
| axisTitlesPosition |
軸のタイトルを配置する場所（グラフ領域と比較）。サポートされている値:
型: string
デフォルト: 「out」
|
| backgroundColor |
グラフのメイン領域の背景色。単純な HTML カラー文字列（ タイプ: 文字列またはオブジェクト
デフォルト: 「white」
|
| backgroundColor.stroke |
グラフの枠線の色。HTML のカラー文字列で指定します。 型: string
デフォルト: 「#666」
|
| backgroundColor.strokeWidth |
枠線の幅（ピクセル単位）。 タイプ: 数値
デフォルト: 0
|
| backgroundColor.fill |
グラフの塗りつぶしの色。HTML の色文字列で指定します。 型: string
デフォルト: 「white」
|
| chartArea |
グラフ領域（グラフ自体が描画される場所。軸と凡例を除く）の配置とサイズを構成するメンバーを持つオブジェクト。サポートされている形式は、数字、または数字の後に % が続く形式です。単純な数字はピクセル単位の値で、数字の後に % を続けるとパーセンテージになります。例: タイプ: オブジェクト
デフォルト: null
|
| chartArea.backgroundColor |
グラフ領域の背景色。文字列を使用する場合は、16 進数文字列（例:「#fdc」）、英語の色の名前）を使用できます。オブジェクトを使用する場合は、次のプロパティを指定できます。
タイプ: 文字列またはオブジェクト
デフォルト: 「white」
|
| chartArea.left |
左の枠線からグラフを描画する距離。 タイプ: 数値または文字列
デフォルト: auto
|
| chartArea.top |
上枠線からグラフを描画する距離。 タイプ: 数値または文字列
デフォルト: auto
|
| chartArea.width |
グラフ領域の幅。 タイプ: 数値または文字列
デフォルト: auto
|
| chartArea.height |
グラフ領域の高さ。 タイプ: 数値または文字列
デフォルト: auto
|
| 色 |
グラフの要素に使用する色。文字列の配列。各要素は HTML カラー文字列です（例: 型: 文字列の配列
デフォルト: デフォルトの色
|
| 十字線 |
グラフの crosshair プロパティを含むオブジェクト。 タイプ: オブジェクト
デフォルト: null
|
| crosshair.color |
十字線の色。色名（例:「青」）または RGB 値（例:「#adf」）。 型: string
タイプ: default
|
| crosshair.focused |
フォーカス時の十字線のプロパティを含むオブジェクト。 タイプ: オブジェクト
デフォルト: default
|
| crosshair.opacity |
十字線の不透明度。 タイプ: 数値
デフォルト: 1.0
|
| crosshair.orientation |
十字の向き。縦線のみの場合は「縦」、横髪のみの場合は「横」、従来の十字線の場合は「両方」を指定できます。 型: string
Default: 「 Beta」
|
| crosshair.selected |
選択時に十字線のプロパティを含むオブジェクト。 タイプ: オブジェクト
デフォルト: default
|
| crosshair.trigger |
十字線を表示するタイミング: 型: string
Default: 「 Beta」
|
| 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
|
| hAxis |
さまざまな横軸の要素を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
タイプ: オブジェクト
デフォルト: null
|
| hAxis.baseline |
横軸のベースライン。 このオプションは タイプ: 数値
デフォルト: 自動
|
| hAxis.baselineColor |
横軸のベースラインの色。任意の HTML カラー文字列（例: このオプションは タイプ: 数値
デフォルト: 「black」
|
| hAxis.direction |
横軸での値の増加の方向。値の順序を逆にするには、 タイプ: 1 または -1
デフォルト: 1
|
| hAxis.format |
数値軸または日付軸のラベルの形式文字列。
数値軸のラベルの場合、これは小数形式の
ICU パターンセット
のサブセットです。たとえば、
日付軸のラベルの場合、これは日付形式の
ICU パターンセット
のサブセットです。たとえば、 ラベルに適用される実際の書式は、API を読み込んだ際の言語 / 地域に基づきます。詳しくは、 特定のロケールでのグラフの読み込み をご覧ください。
目盛り値とグリッド線の計算では、関連するすべてのグリッド線オプションの代替の組み合わせが検討され、フォーマットされた目盛りラベルが重複または重複する場合は、代替案は拒否されます。そのため、整数の目盛り値のみを表示する場合は
このオプションは、 型: string
デフォルト: auto
|
| hAxis.gridlines |
横軸のグリッド線を構成するプロパティを持つオブジェクト。 横軸のグリッド線は垂直方向に描画されます。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {color: '#333', minSpacing: 20}
このオプションは、 タイプ: オブジェクト
デフォルト: null
|
| hAxis.gridlines.color |
グラフ領域内の水平グリッド線の色。有効な HTML カラー文字列を指定します。 型: string
デフォルト: 「#CCC」
|
| hAxis.gridlines.count |
グラフ領域内の水平グリッド線のおおよその数。
タイプ: 数値
デフォルト: -1
|
| hAxis.gridlines.interval |
隣接するグリッド線間のサイズ（ピクセルではなくデータ値）の配列。現時点では、このオプションは数値軸専用ですが、日付と時刻にのみ使用される タイプ: 1 ～ 10 の数値（10 は含みません）。
デフォルト: 計算済み
|
| hAxis.gridlines.minSpacing |
行軸の主要グリッド線間の最小画面スペース（ピクセル単位）。主要なグリッド線のデフォルトは、線形スケールでは タイプ: 数値
デフォルト: 計算済み
|
| hAxis.gridlines.multiple |
すべてのグリッド線と目盛りの値は、このオプションの値の倍数である必要があります。区間とは異なり、倍数の 10 倍のべき乗は考慮されません。そのため、 タイプ: 数値
デフォルト: 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.interval |
minimumGridlines.interval オプションはメジャー グリッドラインの間隔オプションに似ていますが、選択される間隔は常にメジャー グリッドラインの間隔の偶数になります。線形スケールのデフォルトの間隔は タイプ: 数値
デフォルト: 1
|
| hAxis.minorGridlines.minSpacing |
隣接するマイナー グリッド線間、およびマイナー グリッドラインとメジャー グリッドラインとの間に必要な最小スペース（ピクセル単位）。デフォルト値は、線形スケールの場合、主要グリッド線の minSpacing の 1/2、対数スケールの場合、minSpacing の 1/5 です。 タイプ: 数値
デフォルト: 計算済み
|
| hAxis.minorGridlines.multiple |
メジャー タイプ: 数値
デフォルト: 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.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 軸の目盛りを、指定した配列に置き換えます。配列の各要素は、有効な目盛り値（数値、日付、日時、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.allowContainerBoundaryTextCutoff |
false の場合、最も外側のラベルが非表示になり、グラフ コンテナによって切り抜かれます。true の場合、ラベルの切り抜きが許可されます。 このオプションは 型: boolean
デフォルト: false
|
| hAxis.slantedText |
true の場合、横軸のテキストを斜めに描画して、より多くのテキストが軸に沿って収まるようにします。false の場合、横軸のテキストを上向きに描画します。縦向きに描画したときにテキストがすべて収まらない場合は、テキストが傾斜します。このオプションは、 型: boolean
デフォルト: 自動
|
| hAxis.slantedTextAngle |
横軸のテキストが傾いて描画されている場合の角度。 タイプ: 数値、-90 ～ 90
デフォルト: 30
|
| hAxis.maxAlternation |
横軸のテキストの最大レベル数。軸のテキストラベルが混雑しすぎると、サーバーはラベル同士を近づけるために隣接するラベルを上下に移動させることがあります。この値は、使用する最大レベル数を指定します。ラベルが重複せずに収まる場合、サーバーは使用するレベルを少なくできます。日付と時刻のデフォルトは 1 です。 タイプ: 数値
デフォルト: 2
|
| hAxis.maxTextLines |
テキストラベルの最大行数。ラベルが長すぎる場合、複数行にまたがることがあります。行数はデフォルトで、使用可能なスペースの高さによって制限されます。 タイプ: 数値
デフォルト: auto
|
| hAxis.minTextSpacing |
隣接する 2 つのテキストラベルの間に許容される水平方向の最小スペース（ピクセル単位）。ラベルの間隔が狭すぎる場合や長すぎる場合、間隔がこのしきい値を下回ることがあります。この場合、ラベルの切り捨てや一部の削除など、ラベルの整理方法のいずれかが適用されます。 タイプ: 数値
デフォルト:
hAxis.textStyle.fontSize の値 |
| hAxis.showTextEvery |
表示する横軸のラベルの数。1 はすべてのラベルを表示することを意味し、2 は 1 つ以上のラベルを表示することを意味します。デフォルトでは、できる限り多くのラベルが重ならないように表示されます。 タイプ: 数値
デフォルト: 自動
|
| 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
|
| 身長 |
グラフの高さ（ピクセル単位）。 タイプ: 数値
デフォルト: 含まれる要素の高さ
|
| interpolateNulls |
欠点の値を推測するかどうか。true の場合、隣接するポイントに基づいて欠損データの値を推測します。false の場合、不明な位置で行内に改行を残します。
これは、 型: boolean
デフォルト: false
|
| isStacked |
true に設定した場合、各ドメイン値ですべてのシリーズの要素がスタックされます。注: 列グラフ、エリアグラフ、SteppedArea グラフでは、Google Charts では、系列要素のスタックに合わせて凡例の項目の順序が逆になっています（たとえば、系列 0 は最下端の凡例項目になります）。これは、棒グラフには 適用されません 。
100% スタッキングの場合、各要素の計算値は、ツールチップ内の実際の値の後に表示されます。
ターゲット軸はデフォルトで、相対値 0 ～ 1 のスケールに基づく目盛り値が
100% スタッキングは タイプ: ブール値/文字列
デフォルト: false
|
| 凡例 |
凡例のさまざまな要素を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
タイプ: オブジェクト
デフォルト: null
|
| legend.alignment |
凡例の配置。次のいずれか 1 つを指定できます。
開始、中央、終了は、凡例のスタイル（垂直または水平）に関連します。たとえば、「right」の凡例では「start」と「end」がそれぞれ上下に配置されます。「top」の凡例では、「start」と「end」はそれぞれ領域の左右にあります。 デフォルト値は、凡例の位置によって異なります。「ボトム」の凡例のデフォルトは「center」です。その他の凡例のデフォルトは「start」です。 型: string
デフォルト: 自動
|
| legend.maxLines |
凡例の最大行数。凡例に線を追加するには、1 より大きい数値に設定します。注: 実際にレンダリングされる線の数を決定するために使用される正確なロジックは、現在も随時決定されます。 現在このオプションは、legend.position が top の場合にのみ機能します。 タイプ: 数値
デフォルト: 1
|
| legend.pageIndex |
凡例の最初に選択されたゼロベースのページ インデックス。 タイプ: 数値
デフォルト: 0
|
| legend.position |
凡例の位置。次のいずれか 1 つを指定できます。
型: string
デフォルト: 「right」
|
| legend.textStyle |
凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| lineDashStyle |
破線のオン / オフ パターン。たとえば、 型: 数値の配列
デフォルト: null
|
| lineWidth |
データ線の幅（ピクセル単位）。すべての線を非表示にしてポイントのみを表示するには、ゼロを使用します。 タイプ: 数値
デフォルト: 2
|
| 画面の向き |
グラフの向き。 型: string
デフォルト: 'horizontal'
|
| pointShape |
個々のデータ要素の形状（「円」、「三角形」、「正方形」、「ひし形」、「スター」、「ポリゴン」）。例については、 ポイントに関するドキュメント をご覧ください。 型: string
デフォルト: 「circle」
|
| pointSize |
表示されるポイントの直径（ピクセル単位）。すべてのポイントを非表示にするには、ゼロを使用します。 タイプ: 数値
デフォルト: 0
|
| pointsVisible |
ポイントを表示するかどうかを決定します。すべてのポイントを非表示にするには、
これは、 型: boolean
デフォルト: true
|
| reverseCategories |
true に設定すると、右から左に系列が描画されます。デフォルトでは、左から右に描画されます。
このオプションは、 型: boolean
デフォルト: false
|
| selectionMode |
型: string
デフォルト: 「single」
|
| シリーズ |
オブジェクトの配列で、それぞれがグラフ内の対応する系列の形式を表します。系列に対してデフォルト値を使用するには、空のオブジェクト {} を指定します。系列または値が指定されていない場合は、グローバル値が使用されます。各オブジェクトは次のプロパティをサポートしています。
オブジェクトの配列（それぞれが指定された順序でシリーズに適用される）を指定することも、それぞれの子にどのシリーズを適用するかを示す数値キーを持つオブジェクトを指定することもできます。たとえば、次の 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」
|
| vAxes |
グラフに複数の垂直軸がある場合は、個々の垂直軸のプロパティを指定します。各子オブジェクトは
複数の縦軸を持つグラフを指定するには、まず
{
series: {
2: {
targetAxisIndex:1
}
},
vAxes: {
1: {
title:'Losses',
textStyle: {color: 'red'}
}
}
}
このプロパティはオブジェクトまたは配列のいずれかです。オブジェクトはオブジェクトの集まりであり、各オブジェクトには、定義する軸を指定する数値ラベルが付けられています。これは上記の形式です。配列は、軸ごとに 1 つのオブジェクトの配列です。たとえば、次の配列スタイルの表記は、上記の
vAxes: [
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {color: 'red'} // Axis 1
}
]
型: オブジェクトの配列、または子オブジェクトを持つオブジェクト
デフォルト: null
|
| vAxis |
さまざまな縦軸の要素を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
タイプ: オブジェクト
デフォルト: null
|
| vAxis.baseline |
タイプ: 数値
デフォルト: 自動
|
| vAxis.baselineColor |
縦軸のベースラインの色を指定します。任意の HTML カラー文字列（例: タイプ: 数値
デフォルト: 「black」
|
| vAxis.direction |
縦軸での値の増加の方向。デフォルトでは、低い値はグラフの下部に表示されます。値の順序を逆にするには、 タイプ: 1 または -1
デフォルト: 1
|
| vAxis.format |
数値軸のラベルの形式文字列。これは、
ICU パターンセット
のサブセットです。
たとえば、
ラベルに適用される実際の書式は、API を読み込んだ際の言語 / 地域に基づきます。詳しくは、 特定のロケールでのグラフの読み込み をご覧ください。
目盛り値とグリッド線の計算では、関連するすべてのグリッド線オプションの代替の組み合わせが検討され、フォーマットされた目盛りラベルが重複または重複する場合は、代替案は拒否されます。そのため、整数の目盛り値のみを表示する場合は 型: string
デフォルト: auto
|
| vAxis.gridlines |
縦軸のグリッド線を構成するメンバーを持つオブジェクト。 縦軸のグリッド線は横方向に描画されます。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {color: '#333', minSpacing: 20}
タイプ: オブジェクト
デフォルト: null
|
| vAxis.gridlines.color |
グラフ領域内の垂直グリッド線の色。有効な HTML カラー文字列を指定します。 型: string
デフォルト: 「#CCC」
|
| vAxis.gridlines.count |
グラフ領域内の水平グリッド線のおおよその数。
タイプ: 数値
デフォルト: -1
|
| vAxis.gridlines.interval |
隣接するグリッド線間のサイズ（ピクセルではなくデータ値）の配列。現時点では、このオプションは数値軸専用ですが、日付と時刻にのみ使用される タイプ: 1 ～ 10 の数値（10 は含みません）。
デフォルト: 計算済み
|
| vAxis.gridlines.minSpacing |
行軸の主要グリッド線間の最小画面スペース（ピクセル単位）。主要なグリッド線のデフォルトは、線形スケールでは タイプ: 数値
デフォルト: 計算済み
|
| vAxis.gridlines.multiple |
すべてのグリッド線と目盛りの値は、このオプションの値の倍数である必要があります。区間とは異なり、倍数の 10 倍のべき乗は考慮されません。そのため、 タイプ: 数値
デフォルト: 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.interval |
minimumGridlines.interval オプションはメジャー グリッドラインの間隔オプションに似ていますが、選択される間隔は常にメジャー グリッドラインの間隔の偶数になります。線形スケールのデフォルトの間隔は タイプ: 数値
デフォルト: 1
|
| vAxis.minorGridlines.minSpacing |
隣接するマイナー グリッド線間、およびマイナー グリッドラインとメジャー グリッドラインとの間に必要な最小スペース（ピクセル単位）。デフォルト値は、線形スケールの場合、主要グリッド線の minSpacing の 1/2、対数スケールの場合、minSpacing の 1/5 です。 タイプ: 数値
デフォルト: 計算済み
|
| vAxis.minorGridlines.multiple |
メジャー タイプ: 数値
デフォルト: 1
|
| 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() |
選択したグラフ エンティティの配列を返します。
選択可能なエンティティは、ポイント、アノテーション、凡例のエントリ、カテゴリです。
ポイントまたはアノテーションは、データテーブルのセル、凡例のエントリ（行インデックスは null）、カテゴリは行（列インデックスが null）に対応します。このグラフでは、任意の時点で選択できるエンティティは 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() |
指定したグラフ エンティティを選択します。前の選択をキャンセルします。
選択可能なエンティティは、ポイント、アノテーション、凡例のエントリ、カテゴリです。
ポイントまたはアノテーションは、データテーブルのセル、凡例のエントリ（行インデックスは null）、カテゴリは行（列インデックスが null）に対応します。このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: none
|
clearChart() |
チャートを消去し、割り当て済みリソースをすべて解放します。 戻り値の型: none
|
イベント
これらのイベントの使用方法について詳しくは、基本的なインタラクティビティ、イベントの処理、イベントを発生させるをご覧ください。
| 名前 | |
|---|---|
animationfinish |
遷移アニメーションの完了時に呼び出されます。 Properties（プロパティ）: なし
|
click |
ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。 プロパティ: targetID
|
error |
グラフのレンダリング中にエラーが発生したときに呼び出されます。 プロパティ: id、message
|
legendpagination |
ユーザーが凡例のページ分け用の矢印をクリックすると呼び出されます。現在の凡例のゼロベースのページ インデックスと総ページ数を返します。 プロパティ: currentPageIndex、totalPages
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 プロパティ: row、column
|
onmouseout |
ユーザーがビジュアル エンティティからマウス離れたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 プロパティ: row、column
|
ready |
グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、 Properties（プロパティ）: なし
|
select |
ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、 Properties（プロパティ）: なし
|
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。