本頁面由 Cloud Translation API 翻譯而成。

註解圖表

Overview
範例
載入中
資料格式
設定選項
方法
事件
資料政策
Notes

總覽

註解圖表是支援註解的互動式時間序列折線圖。請注意，註解時間軸現在會自動使用註解圖表。

混淆快訊：目前 Google 註解圖表與其他 Google 圖表 (目前區域、長條圖、資料欄、組合、折線和散佈圖) 支援的註解不同。在這類圖表中，註解會在獨立的資料表資料欄中指定，並以簡短文字顯示，使用者可以將滑鼠遊標懸停在上方，查看完整的註解文字。不過，註解圖表會在右側顯示完整註解，如下所示。

範例

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);
      }

<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 軸上的最大值。如果資料點上限超過這個值，系統會忽略這項設定並調整圖表，顯示高於上限資料點的下一個主要勾號。優先順序高於由 `scaleType` 決定的 Y 軸上限。這與核心圖表中的 `maxValue` 類似。類型：數字預設：自動
分鐘	Y 軸顯示的最小值。如果最低資料點小於這個值，系統會忽略這項設定並調整圖表，顯示低於最低資料點的下一個主要勾號。優先順序高於由 `scaleType` 決定的 Y 軸最小值。這與核心圖表中的 `minValue` 類似。類型：數字預設：自動
numberFormats	指定用於設定圖表頂端值的數字格式模式。模式應採用 java DecimalFormat 類別指定的格式。如果未指定，則會使用預設格式模式。如果指定單一字串模式，則所有值都會使用該模式。如果指定了對應，則索引鍵為序列的索引 (從零開始)，而值則是用於指定指定序列的模式。您不需要為圖表中的每個序列加入格式；任何未指定的系列都會使用預設格式。如果指定此選項，則系統會忽略 `displayExactValues` 選項。類型：字串，或是數字：字串組合的對應預設：自動
scaleColumns	指定要顯示在圖表中的 Y 軸刻點的值。預設值為右側是單一縮放比例，這會套用至兩個序列，但您可以將圖表的不同面調整為不同的序列值。這個選項會使用 0 到 3 個數字的陣列，指定序列的索引 (從零開始) 做為比例值。顯示這些值的位置取決於您在陣列中加入的值數量：如果您指定空白陣列，圖表中的刻點就不會顯示 Y 值。如果您指定一個值，指定序列的比例只會顯示在圖表右側。如果您指定兩個值，系統會將第二個數列的比例新增至圖表右側。如果您指定三個值，系統會將第三列的尺度加到圖表中央。系統會忽略陣列中第三個之後的任何值。顯示多種縮放比例時，建議將 `scaleType` 選項設為「allfixed」或「allmaximized」。類型：數字陣列預設：自動
scaleFormat	軸刻點標籤使用的數字格式。`'#'` 的預設設定會以整數顯示。類型：字串預設值： '#'
scaleType	設定 Y 軸上顯示的最大值和最小值。可用選項如下：「最大化」：Y 軸會涵蓋序列的最小值。如果有多個系列，請使用全部最大化。「固定」 [預設] - Y 軸會因資料值而異：如果所有值都 >=0，Y 軸會橫跨 0 到最大值。如果所有值都小於 0，Y 軸會橫跨 0 到最小值。如果值同時為正數和負數，Y 軸會從序列最大值到序列最小值。如果是多個系列叢書，請使用「allfixed」。「allmaximized」 - 與「最大化」相同，但在顯示多種體重計時則使用。兩個圖表會以相同的比例最大化，也就是說，系統會將圖表與 Y 軸進行比較，但將滑鼠遊標懸停在各個序列上，即可顯示真正的值。「allfixed」- 與「固定」相同，但在顯示多份體重計時使用。這項設定會依據適用的序列調整每個比例 (與 `scaleColumns` 搭配使用)。如果指定最小值和/或最大值，則該選項的優先順序會高於調整類型決定的最小值和/或最大值。類型：字串預設值：「fixed」
資料表	包含註解表格相關選項。如要指定這個物件的屬性，您可以使用物件常值標記法： var options: { table: { sortAscending: true, sortColumn: 1 } }; 類型：物件預設值：null
table.sortAscending	如果設為 `true`，則會反轉註解表格的順序，並以遞增順序顯示這些表格。類型：布林值預設值：false
table.sortColumn	註解表格的欄索引。註解文字欄的索引必須為 0，註解標籤欄的索引必須為 1。類型：數字預設值：0
厚度	介於 0 到 10 (含) 之間的數字，用於指定線條的粗細，其中 0 為最細。類型：數字預設值：0
zoomEndTime	設定所選縮放範圍的結束日期/時間。類型：日期預設：無
zoomStartTime	設定所選縮放範圍的開始日期/時間。類型：日期預設：無

方法

方法
`clearChart()`	清除圖表並釋出所有分配的資源。傳回類型：無
`draw(data, options, state)`	繪製圖表。傳回類型：無
`getContainer()`	擷取包含註解圖表的容器元素的控制代碼。傳回類型：處理 DOM 元素
`getSelection()`	標準 `getSelection()` 實作。所選元素為儲存格元素。使用者一次只能選取一個儲存格。傳回類型：選取元素的陣列
`getVisibleChartRange()`	傳回具有 `start` 和 `end` 屬性的物件，每個屬性都是 `Date` 物件，代表目前時間選擇。傳回類型：具有 `start` 和 `end` 屬性的物件
`hideDataColumns(columnIndexes)`	隱藏圖表中的指定資料序列。接受一個參數，可以是數字或數字陣列，其中 0 代表第一個資料序列，依此類推。傳回類型：無
`setVisibleChartRange(start, end)`	將可見範圍 (縮放) 設為指定範圍。接受 `Date` 類型的兩個參數，這些參數代表指定所選可見範圍的第一次和最後一次。將 start 設為 null，以包含從最早日期到 end 的所有內容；將 end 設為空值以包含從 start 到最後日期的所有所有項目。傳回類型：無
`showDataColumns(columnIndexes)`	使用 `hideDataColumns` 方法隱藏圖表中的指定資料序列。接受一個參數，可以是數字或數字陣列，其中 0 代表第一個資料序列，依此類推。傳回類型：無

事件

名稱

名稱
`rangechange`	在使用者變更範圍滑桿時觸發。新的範圍端點將採用 `event['start']` 和 `event['end']` 格式： 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`	圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。`draw` 屬性：無
`select`	在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 `getSelection()`。屬性：無

rangechange

在使用者變更範圍滑桿時觸發。新的範圍端點將採用 event['start'] 和 event['end'] 格式：

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

圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。draw

屬性：無

select

在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 getSelection()。

屬性：無

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。

註解圖表 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

總覽

範例

載入中

資料格式

設定選項

方法

事件

資料政策

註解圖表