總覽
註解圖表是支援註解的互動式時間序列折線圖。請注意，註解時間軸現在會自動使用註解圖表。
混淆快訊：目前 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);
資料格式
您可以在圖表中顯示一或多條折線。每一列都代表圖表上的 X 位置 (也就是特定時間)，每條折線都以一到三個資料欄描述。
- 第一欄屬於
date或datetime類型，並指定圖表上點的 X 值。如果這個資料欄的類型是date(而不是datetime)，X 軸上的最短時間會是一天。 - 接著，每個資料行都會以另外一到三個其他資料欄加以描述，說明如下：
- Y 值 - [必要，數字] 每組的第一欄說明從第一欄開始對應時間的該行值。資料欄標籤會顯示在圖表中，做為該線條的標題。
- 註解標題 - [選用，字串] 如果字串資料欄跟值資料欄之後，且
displayAnnotations選項為 true，則這個資料欄會保留描述這個點的簡短標題。舉例來說，如果這條行代表巴西的溫度，而這個資料點的數字很高，標題就會是「創下最熱的日子」。 - 註解文字 - [選用字串] 如果這個系列有第二個字串資料欄，這個儲存格的值會用做這個點的其他說明文字。您必須將
displayAnnotations選項設為 true，才能使用這個資料欄。如果將allowHtml設為true，則可使用 HTML 標記。基本上沒有大小限制，但請注意，項目過長可能會使顯示區段溢出。即使目前已有這個時間點的註解標題欄，也不必提供此欄。圖表並未使用這個資料欄標籤。舉例來說，如果這是史上最熱的日子，您可以說「下一個最近的一天是 10 度涼爽！」。
設定選項
| 名稱 | |
|---|---|
| allowHtml |
如果設為 true，所有包含 HTML 標記的註解文字都會以 HTML 形式顯示。 類型：布林值
預設值：false
|
| allValuesSuffix |
新增至圖例所有值並加上垂直軸的刻度標籤的後置字串。 類型：字串
預設：無
|
| annotationsWidth |
在整個圖表區域外，註解區域的寬度 (以百分比為單位)。必須是介於 5 至 80 之間的數字。 類型：數字
預設值：25
|
| 顏色 |
圖表線條和標籤的顏色。字串陣列。每個元素都是 採用有效 HTML 顏色格式的字串。例如「red」或「#00cc00」。 類型：字串陣列
預設：預設顏色
|
| dateFormat |
在右上角顯示日期資訊時使用的格式。這個欄位的格式如 java SimpleDateFormat 類別所指定 類型：字串
預設值：可以是「MMMM dd, yyyy」或「HH:mm MMMM dd, yyyy」，視第一欄的類型而定 (分別採用日期或日期時間)。
|
| displayAnnotations |
如果設為 False，圖表就會隱藏註解表格，而且不會顯示註解和「AnnotationText」(無論資料為何，如果資料中沒有註解，也不會顯示註解表格)。此選項設為 true 時，在每個數值欄之後，即可新增兩個選用註解字串欄，另一個用於註解標題，另一個用於註解文字。 類型：布林值
預設值：true
|
| displayAnnotationsFilter |
如果設為 true，圖表就會顯示篩選器控制項來篩選註解。如有多個註解，請使用這個選項。 類型：布林值
預設值：false
|
| displayDateBarSeparator |
是否在圖例值與圖例中的日期之間顯示小型長條分隔符 ( | )，其中 true 表示「是」。 類型：布林值
預設值：true
|
| displayExactValues |
是否在圖表頂端顯示概略的圓角值，藉此節省空間；false 表示有可能。舉例來說，如果設為 False，56123.45 可能會顯示為 56.12k。 類型：布林值
預設值：false
|
| displayLegendDots |
是否在圖例文字中顯示數值，其中 True 表示「是」。 類型：布林值
預設值：true
|
| displayLegendValues |
是否顯示圖例中醒目顯示的值，其中 True 代表「是」。 類型：布林值
預設值：true
|
| displayRangeSelector |
是否顯示縮放範圍選取區域 (圖表底部的區域)，其中 False 代表否。 縮放選取器的外框是圖表中第一個序列的對數調整版本，此版本會根據縮放選取器的高度調整。 類型：布林值
預設值：true
|
| displayZoomButtons |
是否顯示縮放按鈕 (「1d 5d 1m」等)，其中 false 表示「否」。 類型：布林值
預設值：true
|
| 填滿 |
介於 0 到 100 (含) 之間的數字，用於指定折線圖中各行下方填滿的 Alpha 值。100 表示 100% 不透明，0 則代表完全不填滿。填滿顏色與上方的線條相同。 類型：數字
預設值：0
|
| legendPosition |
是否使用縮放按鈕和日期 (「sameRow」) 將彩色圖例放置於同一列，還是要放在新的列 (「newRow」)。 類型：字串
預設值：「sameRow」
|
| max |
要顯示在 Y 軸上的最大值。如果資料點上限超過這個值，系統會忽略這項設定並調整圖表，顯示高於上限資料點的下一個主要勾號。優先順序高於由 這與核心圖表中的 類型：數字
預設：自動
|
| 分鐘 |
Y 軸顯示的最小值。如果最低資料點小於這個值，系統會忽略這項設定並調整圖表，顯示低於最低資料點的下一個主要勾號。優先順序高於由 這與核心圖表中的 類型：數字
預設：自動
|
| numberFormats |
指定用於設定圖表頂端值的數字格式模式。 模式應採用 java DecimalFormat 類別指定的格式。
如果指定此選項，則系統會忽略 類型：字串，或是數字：字串組合的對應
預設：自動
|
| scaleColumns |
指定要顯示在圖表中的 Y 軸刻點的值。預設值為右側是單一縮放比例，這會套用至兩個序列，但您可以將圖表的不同面調整為不同的序列值。 這個選項會使用 0 到 3 個數字的陣列，指定序列的索引 (從零開始) 做為比例值。顯示這些值的位置取決於您在陣列中加入的值數量：
顯示多種縮放比例時，建議將 類型：數字陣列
預設：自動
|
| scaleFormat |
軸刻點標籤使用的數字格式。 類型：字串
預設值： '#'
|
| scaleType |
設定 Y 軸上顯示的最大值和最小值。可用選項如下：
如果指定最小值和/或最大值，則該選項的優先順序會高於調整類型決定的最小值和/或最大值。 類型：字串
預設值：「fixed」
|
| 資料表 |
包含註解表格相關選項。如要指定這個物件的屬性，您可以使用物件常值標記法：
var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};
類型：物件
預設值：null
|
| table.sortAscending |
如果設為 類型：布林值
預設值：false
|
| table.sortColumn |
註解表格的欄索引。註解文字欄的索引必須為 0，註解標籤欄的索引必須為 1。 類型：數字
預設值：0
|
| 厚度 |
介於 0 到 10 (含) 之間的數字，用於指定線條的粗細，其中 0 為最細。 類型：數字
預設值：0
|
| zoomEndTime |
設定所選縮放範圍的結束日期/時間。 類型：日期
預設：無
|
| zoomStartTime |
設定所選縮放範圍的開始日期/時間。 類型：日期
預設：無
|
方法
| 方法 | |
|---|---|
clearChart() |
清除圖表並釋出所有分配的資源。 傳回類型：無
|
draw(data, options, state) |
繪製圖表。 傳回類型：無
|
getContainer() |
擷取包含註解圖表的容器元素的控制代碼。 傳回類型：處理 DOM 元素
|
getSelection() |
標準 傳回類型：選取元素的陣列
|
getVisibleChartRange() |
傳回具有
傳回類型：具有
start 和 end 屬性的物件 |
hideDataColumns(columnIndexes) |
隱藏圖表中的指定資料序列。接受一個參數，可以是數字或數字陣列，其中 0 代表第一個資料序列，依此類推。 傳回類型：無
|
setVisibleChartRange(start, end) |
將可見範圍 (縮放) 設為指定範圍。接受 傳回類型：無
|
showDataColumns(columnIndexes) |
使用 傳回類型：無
|
事件
| 名稱 | |
|---|---|
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 |
圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。 屬性：無
|
select |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 屬性：無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。