已加註的時間軸

  1. Overview
  2. 範例
  3. 載入中
  4. 資料格式
  5. 設定選項
  6. 方法
  7. 事件
  8. 資料政策
  9. Notes

總覽

含有選用註解的互動式時間序列折線圖。

加註時間軸現在會自動改用註解圖表。

範例

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>
  </body>
</html>

重要事項： 如要使用這個視覺呈現，您必須明確指定網頁上容器元素的高度和寬度。例如：<div id="chart_div" style="width:400; height:250"></div>。

載入中

google.charts.load 套件名稱為 "annotatedtimeline"

  google.charts.load("current", {packages: ['annotatedtimeline']});

視覺呈現的類別名稱為 google.visualization.AnnotatedTimeLine

  var visualization = new google.visualization.AnnotatedTimeLine(container);

資料格式

您可以在圖表中顯示一或多條折線。每一列都代表圖表上的 X 位置，也就是特定時間；每行會以一到三個資料欄描述特定時間。

  • 第一欄屬於 date 或 datetime 類型，並指定圖表上點的 X 值。如果這個資料欄的類型是 date (而不是 datetime)，X 軸上的最短時間會是一天。
  • 接著，每個資料行都會以另外一到三個其他資料欄加以描述，說明如下：
    • Y 值 - [必要，數字] 每組的第一欄說明從第一欄開始對應時間的該行值。資料欄標籤會顯示在圖表中，做為該線條的標題。
    • 註解標題 - [選用，字串] 如果字串資料欄跟值資料欄之後，且 displayAnnotations 選項為 true，則這個資料欄會保留描述這個點的簡短標題。舉例來說，如果這條行代表巴西的溫度，而這個資料點的數字很高，標題就會是「創下最熱的日子」。
    • 註解文字 - [選用字串] 如果這個系列有第二個字串資料欄，這個儲存格的值會用做這個點的其他說明文字。您必須將 displayAnnotations 選項設為 true，才能使用這個資料欄。如果將 allowHtml 設為 true，則可使用 HTML 標記。基本上沒有大小限制，但請注意，項目過長可能會使顯示區段溢出。即使目前已有這個時間點的註解標題欄，也不必提供此欄。圖表並未使用這個資料欄標籤。舉例來說，如果這是史上最熱的日子，您可以說「下一個最近的一天是 10 度涼爽！」。

設定選項

名稱 類型 預設 說明
allowHtml boolean false 如果設為 true，所有包含 HTML 標記的註解文字都會以 HTML 形式轉譯。
allowRedraw boolean false

針對這個圖表中第二次和後續呼叫的 draw() 呼叫更有效率的重新繪製技術。只會重新繪製圖表區域。如要使用這個選項，您必須符合下列條件：

  • allowRedraw 必須為 true
  • displayAnnotation 必須為 false (因此您無法顯示註解)
  • 您必須傳遞與第一次呼叫 draw() 相同的選項和值 (allowRedraw 和 displayAnnotation 除外)。
allValuesSuffix 字串 無 為比例和圖例的所有值加上後置字串。
annotationsWidth 號碼 25 在整個圖表區域外，註解區域的寬度 (以百分比為單位)。必須是介於 5 至 80 之間的數字。
顏色 字串陣列 預設色彩 圖表線條和標籤的顏色。字串陣列。每個元素都是採用有效 HTML 顏色格式的字串。例如「紅色」或「#00cc00」。
dateFormat 字串 可能是「MMMM dd, yyyy」或「HH:mm MMMM dd, yyyy」，視第一欄的類型而定 (分別採用日期或日期和時間)。 在右上角顯示日期資訊的格式。 這個欄位的格式如 java SimpleDateFormat 類別所指定。
displayAnnotations boolean false 如果設為 true，圖表的上方還會顯示註解。 此選項設為 true 時，在每個數值欄之後，您可以新增兩個選用註解字串欄，一個用於註解標題，另一個用於註解文字。
displayAnnotationsFilter boolean false 如果設為 true，圖表就會顯示篩選器該等項目，以便篩選註解。 如有多個註解，請使用這個選項。
displayDateBarSeparator boolean true 是否在序列值和圖例日期中顯示小長條分隔符 ( | )，其中 true 表示「是」。
displayExactValues boolean false 是否在圖表頂端顯示概略的圓角值，藉此節省空間；false 表示有可能。舉例來說，如果設為 False，56123.45 可能會顯示為 56.12k。
displayLegendDots boolean true 是否在圖例文字中的值旁邊顯示圓點，其中 true 表示「是」。
displayLegendValues boolean true 是否顯示圖例中醒目顯示的值，其中 True 代表「是」。
displayRangeSelector boolean true

是否顯示縮放範圍選取區域 (圖表底部的區域)，其中 False 代表否。

縮放選取器的外框是圖表中最後一個序列的對數縮放版本，此版本會根據縮放選取器的高度調整。
displayZoomButtons boolean true 是否顯示縮放連結 (「1d 5d 1m」等)，其中 False 代表「否」。
填滿 號碼 0 介於 0 到 100 (含) 之間的數字，用於指定折線圖中各行下方填滿的 Alpha 值。100 表示 100% 不透明填滿，0 表示完全沒有填滿。填滿顏色與上方的線條顏色相同。
highlightDot 字串 「nearest」

系列中要醒目顯示的圓點，以及要顯示在圖例中的對應值。請選取下列其中一個值：

  • 「nearest」：沿著 X 軸靠近滑鼠的值。
  • 「last」- 滑鼠左側的下一組值。
legendPosition 字串 「sameRow」 是否使用縮放按鈕和日期 (「sameRow」) 將彩色圖例放置於同一列，或是為新的列 (「newRow」) 放置。
max 號碼 自動 要顯示在 Y 軸上的最大值。如果資料點上限超過這個值，系統會忽略這項設定並調整圖表，顯示高於上限資料點的下一個主要勾號。優先順序高於由 scaleType 決定的 Y 軸上限。
分鐘 號碼 自動 Y 軸顯示的最小值。如果最低資料點小於這個值，系統會忽略這項設定並調整圖表，顯示低於最低資料點的下一個主要勾號。優先順序高於由 scaleType 決定的 Y 軸最小值。
numberFormats 字串，或是數字:String 組合的對應 自動

指定用於設定圖表頂端值的數字格式模式。

模式應採用 java DecimalFormat 類別指定的格式。

  • 如果未指定，則會使用預設格式模式。
  • 如果指定單一字串模式，則所有值都會使用該模式。
  • 如果指定了對應，則索引鍵為系列的索引 (從零開始)，而值則是用於格式化指定序列的模式。
    您不需要為圖表中的每個序列加入格式；任何未指定的系列都會使用預設格式。

如果指定此選項，則系統會忽略 displayExactValues 選項。
scaleColumns 數字陣列 自動

指定要顯示在圖表中的 Y 軸刻點的值。系統預設會在右側顯示單一尺度值，這會套用至兩個序列；但您可以讓圖表的不同面調整至不同的序列值。

這個選項會使用 0 到 3 個數字的陣列，指定序列的索引 (從零開始) 做為比例值。顯示這些值的位置取決於您在陣列中加入的值數量：

  • 如果您指定空白陣列，圖表的刻點旁將不會顯示 Y 值。
  • 如果您指定一個值，指定序列的比例只會顯示在圖表右側。
  • 如果您指定兩個值，系統會將第二個數列的比例新增至圖表右側。
  • 如果您指定三個值，系統會將第三級數列的值新增至圖表中央。
  • 系統會忽略陣列中第三個之後的任何值。

顯示多種縮放比例時，建議將 scaleType 選項設為「allfixed」或「allmaximized」。
scaleType 字串 「已修正」

設定 Y 軸上顯示的最大值和最小值。可用選項如下：

  • 「maximized」- Y 軸會橫跨序列的最大值。如有多套系列叢書，請使用全部最大化。
  • 「固定」 [預設] - Y 軸會因資料值而異：
    • 如果所有值都 >=0，Y 軸會橫跨 0 到最大值資料值。
    • 如果所有值都小於 0，Y 軸會橫跨 0 至最小值。
    • 如果值同時為正數和負數，Y 軸會介於序列上限到序列下限之間。

      如果是多個系列叢書，請使用「allfixed」。
  • 「allmaximized」 - 與「最大化」相同，但在顯示多種量表時使用。兩個圖表會在相同比例下最大化，也就是說，系統會將圖表與 Y 軸進行比較，但將滑鼠遊標懸停在各個序列上，就會顯示為真實的值。
  • 「allfixed」- 與「fixed」相同，但在顯示多部體重計時使用。這項設定會將每個縮放比例調整為適用的序列 (請搭配 scaleColumns 使用)。

如果指定最小和/或上限選項，則該選項的優先順序會高於調整類型決定的最小值和最大值。
厚度 號碼 0 介於 0 到 10 (含) 之間的數字，用於指定線條的粗細，其中 0 為最細。
Wmode 字串 「window」 Flash 圖表的 Window Mode (wmode) 參數。可用的值為「opaque」、「window」或「transparent」。
zoomEndTime 日期 無 設定所選縮放範圍的結束日期/時間。
zoomStartTime 日期 無 設定所選縮放範圍的開始日期/時間。

方法

方法 傳回類型 說明
draw(data, options) 無 繪製圖表。您可以利用 allowRedraw 屬性來加快第二次和之後呼叫 draw() 的回應時間。
getSelection() 選取元素陣列 標準 getSelection() 實作。所選元素為儲存格元素。使用者一次只能選取一個儲存格。
getVisibleChartRange() 具有 start 和 end 屬性的物件 傳回具有 start 和 end 屬性的物件，每個屬性都是 Date 物件，代表目前時間選擇。
hideDataColumns(columnIndexes) 無 隱藏圖表中的指定資料序列。接受一個參數，可以是數字或數字陣列，其中 0 代表第一個資料序列，依此類推。
setVisibleChartRange(start, end) 無 將可見範圍 (縮放) 設為指定範圍。 接受 Date 類型的兩個參數，分別代表指定所選可見範圍的第一次和最後一次。將 start 設為空值以包含從最早日期到 end 的所有項目；將 end 設為空值以包含從 start 到最後日期的所有內容。
showDataColumns(columnIndexes) 無 使用 hideDataColumns 方法隱藏圖表中的指定資料序列。接受一個參數，可以是數字或數字陣列，其中 0 代表第一個資料序列，依此類推。

事件

名稱 說明 屬性
範圍變更 縮放範圍已變更。在使用者修改可見時間範圍後觸發，但在呼叫 setVisibleChartRange 方法後停止。
注意：建議您不要使用事件屬性，而是呼叫 getVisibleChartRange 方法來取得這些屬性。
  • start：日期。變焦範圍的開始時間。
  • end：日期。縮放範圍的結束時間。
已就緒 圖表已可供外部方法呼叫。如果您想與圖表互動，以及在繪製圖表後呼叫方法，您應「先」設定此事件的事件監聽器，並僅在事件觸發後才呼叫這些事件。draw 無
選取 當使用者按一下註解標記 (標記) 時，系統會選取資料表中對應的儲存格。圖表隨後會觸發這個事件。 無

注意：由於某些限制，如果您在瀏覽器中以檔案形式存取網頁 (例如「file://」) 而非伺服器 (例如"http://www").

資料政策

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

注意事項

由於 Flash 安全性設定，當從瀏覽器的檔案位置 (例如 file:///c:/webhost/myhost/myviz.html) 而非網路伺服器網址 (例如 http://www.myhost.com/myviz.html) 存取時，此 (以及所有 Flash 視覺呈現) 可能無法正常運作。這通常只是測試問題。您可以按照 Macromedia 網站中的指示操作，解決這個問題。