概要
アノテーション グラフは、アノテーションをサポートするインタラクティブな時系列折れ線グラフです。アノテーション付きのタイムラインでは、自動的にアノテーション グラフが使用されるようになりました。
混同に関するアラート: 現在、Google アノテーション グラフは、他の Google グラフ（面、棒グラフ、縦棒グラフ、複合グラフ、折れ線グラフ、散布図）でサポートされている アノテーションとは異なります。これらのグラフでは、アノテーションは別のデータテーブル列で指定され、ユーザーがカーソルを合わせるとアノテーション テキスト全体が表示されます。一方、アノテーション グラフでは、以下に示すように、右側にすべてのアノテーションが表示されます。
例
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addColumn('number', 'Gliese 163 mission');
data.addColumn('string', 'Gliese title');
data.addColumn('string', 'Gliese text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
displayAnnotations: true
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div' style='width: 900px; height: 600px;'></div>
</body>
</html>
読み込んでいます
google.charts.load パッケージ名は "annotationchart" です。
google.charts.load("current", {packages: ['annotationchart']});
ビジュアリゼーションのクラス名は google.visualization.AnnotationChart です。
var visualization = new google.visualization.AnnotationChart(container);
データ形式
グラフには 1 つ以上の線を表示できます。各行はグラフ上の X 位置、つまり特定の時間を表します。各行は 1 ～ 3 の列で記述されます。
- 最初の列は
dateまたはdatetime型で、グラフ上の点の X 値を指定します。この列が（datetimeではなく）date型の場合、X 軸の最小時間分解能は 1 日です。 - 各データ行は、以下で説明する 1 ～ 3 列の追加列で記述されます。
- Y 値 - [必須、数値] 各セットの最初の列は、最初の列から対応する時刻における行の値を表します。列ラベルは、線のタイトルとしてグラフに表示されます。
- アノテーションのタイトル - [省略可、文字列] 文字列の列が値の列の後にあり、
displayAnnotationsオプションが true の場合、この列にはこの点を説明する短いタイトルが格納されます。たとえば、この線がブラジルの気温を表し、このポイントが非常に高い数値である場合、タイトルは「記録上で最も暑い日」になることがあります。 - アノテーション テキスト - [省略可の文字列] このシリーズに 2 つ目の文字列の列が存在する場合、セル値はこのポイントの追加説明テキストとして使用されます。この列を使用するには、オプション
displayAnnotationsを true に設定する必要があります。allowHtmlをtrueに設定すると、HTML タグを使用できます。基本的にサイズの制限はありませんが、エントリが長すぎると表示セクションからはみ出す場合があります。このポイントにアノテーションのタイトル列がある場合でも、この列は必要ありません。列ラベルはグラフで使用されません。たとえば、記録的なポイントで最も暑い日であれば、「次の最も近い日は 10 度涼しかった」と言います。
構成オプション
| 名前 | |
|---|---|
| allowHtml |
true に設定すると、HTML タグを含むアノテーション テキストは HTML としてレンダリングされます。 型: boolean
デフォルト: false
|
| allValuesSuffix |
凡例のすべての値と縦軸の目盛りラベルに追加する接尾辞。 型: string
デフォルト: なし
|
| annotationsWidth |
グラフ領域全体に対するアノテーション領域の幅（パーセント単位）。5 ～ 80 の範囲内の数値にする必要があります。 タイプ: 数値
デフォルト: 25
|
| 色 |
グラフの線とラベルに使用する色。文字列の配列。各要素は、有効な HTML カラー形式の文字列です。例: 「red」や「#00cc00」。 型: 文字列の配列
デフォルト: デフォルトの色
|
| dateFormat |
右上に日付情報を表示するために使用される形式。このフィールドの形式は、 java SimpleDateFormat クラス 型: string
デフォルト: 最初の列のタイプ（それぞれ日付、日時）に応じて、「MMMM dd, yyyy」または「HH:mm MMMM dd, yyyy」のいずれかになります。
|
| displayAnnotations |
false に設定すると、グラフでアノテーション テーブルが非表示になり、アノテーションと annotationText が表示されなくなります（このオプションに関係なく、データにアノテーションがない場合もアノテーション テーブルは表示されません）。このオプションを true に設定すると、各数値列の後に、アノテーション文字列用の 2 つの列（アノテーション タイトル用とアノテーション テキスト用）を 2 つ追加できます。 型: boolean
デフォルト: true
|
| displayAnnotationsFilter |
true に設定すると、アノテーションをフィルタするフィルタ オプションがグラフに表示されます。アノテーションが多数ある場合は、このオプションを使用します。 型: boolean
デフォルト: false
|
| displayDateBarSeparator |
凡例の日付と系列値との間に小さい棒区切り（|）を表示するかどうかを指定します。true の場合は表示されます。 型: boolean
デフォルト: true
|
| displayExactValues |
スペースを節約するために、グラフの上部に値を丸めて短縮したバージョンを表示するかどうかを指定します。false は表示可能であることを示します。たとえば、false に設定すると、56123.45 は 56.12k と表示されます。 型: boolean
デフォルト: false
|
| displayLegendDots |
凡例テキストの値の横にドットを表示するかどうかを指定します。true の場合は表示します。 型: boolean
デフォルト: true
|
| displayLegendValues |
凡例にハイライト表示された値を表示するかどうかを指定します。true の場合は表示します。 型: boolean
デフォルト: true
|
| displayRangeSelector |
ズーム範囲の選択領域（グラフ下部の領域）を表示するかどうか。false の場合は表示しない。 ズームセレクタの枠線は、グラフの最初の系列の対数スケール バージョンで、ズームセレクタの高さに合わせてスケーリングされます。 型: boolean
デフォルト: true
|
| displayZoomButtons |
ズームボタン（「1d 5d 1m」など）を表示するかどうかを指定します。false の場合は表示しません。 型: boolean
デフォルト: true
|
| fill |
折れ線グラフの各行の下にある塗りつぶしのアルファを指定する 0 ～ 100 の数値（両端を含む）。100 は 100% 不透明を表し、0 は塗りつぶしなしを意味します。塗りつぶしの色はその上の線と同じ色です。 タイプ: 数値
デフォルト: 0
|
| legendPosition |
色のついた凡例をズームボタンと日付（「sameRow」）の同じ行に配置するか、新しい行（「newRow」）に配置するかを指定します。 型: string
デフォルト: 'sameRow'
|
| max |
Y 軸に表示する最大値。最大データポイントがこの値を超えると、この設定は無視され、最大データポイントの上に次の大きな目盛りが表示されるようグラフが調整されます。これは、 コアグラフの タイプ: 数値
デフォルト: 自動
|
| 分 |
Y 軸に表示する最小値です。最小データポイントがこの値より小さい場合、この設定は無視され、最小データポイントの下に次の大きな目盛りを表示するようにグラフが調整されます。これは、 コアグラフの タイプ: 数値
デフォルト: 自動
|
| numberFormats |
グラフの上部にある値の書式設定に使用する数値形式パターンを指定します。 パターンは、 java DecimalFormat クラス
このオプションを指定すると、 型: 文字列、または数値と文字列のペアのマップ
デフォルト: 自動
|
| scaleColumns |
グラフの Y 軸の目盛りに表示する値を指定します。デフォルトでは、両方の系列に適用されるように、右側に 1 つの目盛りを付けますが、グラフの異なる側を異なる系列値にスケーリングできます。 このオプションは、スケール値として使用するシリーズの（ゼロベース）インデックスを指定する 0 ～ 3 個の数値の配列を取ります。これらの値が表示される場所は、配列に含める値の数によって異なります。
複数のスケールを表示する場合は、 型: 数値の配列
デフォルト: 自動
|
| scaleFormat |
軸の目盛りのラベルに使用する数値形式。デフォルトの 型: string
デフォルト: '#'
|
| scaleType |
Y 軸に表示される最大値と最小値を設定します。次のオプションを使用できます。
最小値や最大値を指定すると、スケールタイプによって決定される最小値や最大値よりも優先されます。 型: string
デフォルト: 「fixed」
|
| table |
アノテーション テーブルに関連するオプションが含まれます。このオブジェクトのプロパティを指定するには、オブジェクト リテラル表記を使用できます。
var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};
タイプ: オブジェクト
デフォルト: null
|
| table.sortAscending |
型: boolean
デフォルト: false
|
| table.sortColumn |
アノテーションを並べ替えるためのアノテーション テーブルの列インデックス。インデックスは、アノテーション ラベル列の場合は 0、アノテーション テキスト列の場合は 1 にする必要があります。 タイプ: 数値
デフォルト: 0
|
| 太さ |
線の太さを指定する 0 ～ 10 の数値（両端を含む）。0 が最も細いことを示します。 タイプ: 数値
デフォルト: 0
|
| zoomEndTime |
選択したズーム範囲の終了日時を設定します。 タイプ: 日付
デフォルト: なし
|
| zoomStartTime |
選択したズーム範囲の開始日時を設定します。 タイプ: 日付
デフォルト: なし
|
メソッド
| メソッド | |
|---|---|
clearChart() |
グラフを消去し、割り当てられたすべてのリソースを解放します。 戻り値の型: none
|
draw(data, options, state) |
グラフを描画します。 戻り値の型: none
|
getContainer() |
アノテーション グラフを含むコンテナ要素へのハンドルを取得します。 戻り値の型: DOM 要素に対するハンドル
|
getSelection() |
標準の 戻り値の型: 選択要素の配列
|
getVisibleChartRange() |
戻り値の型:
start プロパティと end プロパティを持つオブジェクト。 |
hideDataColumns(columnIndexes) |
指定したデータ系列をグラフで非表示にします。1 つのパラメータを受け入れます。このパラメータは、数値または数値の配列です。0 は最初のデータ系列を指します（以下同様）。 戻り値の型: none
|
setVisibleChartRange(start, end) |
表示範囲（ズーム）を指定の範囲に設定します。目的の選択された可視範囲の最初と最後の時間を表す 戻り値の型: none
|
showDataColumns(columnIndexes) |
指定したデータ系列を 戻り値の型: none
|
イベント
| 名前 | |
|---|---|
rangechange |
ユーザーが範囲スライダーを変更したときに呼び出されます。新しい範囲エンドポイントは、
google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);
function rangechange_handler(e) {
console.log('You changed the range to ', e['start'], ' and ', e['end']);
}
プロパティ: start、end
|
ready |
グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、 Properties（プロパティ）: なし
|
select |
ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、 Properties（プロパティ）: なし
|
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはサーバーに送信されません。