註解時間軸

  1. 總覽
  2. 示例
  3. 載入中
  4. 資料格式
  5. 設定選項
  6. 方法
  7. 事件
  8. 資料政策
  9. 附註

簡介

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

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

範例

<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 布林值 否 如果設為 true，任何包含 HTML 標記的註解文字都會算成 HTML。
allowRedraw 布林值 否

針對此視覺化圖表，啟用第二次呼叫和呼叫 draw() 的高效率重畫技巧。只會重新繪製圖表區域。如要使用這個選項，您必須符合下列規定：

  • allowRedraw 必須為 true
  • displayAnnotations 必須為 false (也就是說，無法顯示註解)
  • 您必須傳入與第一次呼叫 draw() 相同的選項和值 (allowRedraw 和 displayAnnotations 除外)。
allValuesSuffix string 無 要套用至體重計和圖例中所有值的後置字串。
註解寬度 數字 25 註解區域的寬度 (以百分比表示)，也就是整個圖表區域。 必須為介於 5 至 80 之間的數字。
顏色 字串陣列 預設色彩 圖表線標題和標籤的顏色。字串陣列。每個元素都是採用有效 HTML 顏色格式的字串。例如：「red」或「#00cc00」。
日期格式 string 「MMMM dd, yyyy」或「HH:mm MMMM dd, yyyy」，視第一欄類型而定 (分別為日期或日期)。 右上角顯示日期資訊的格式。 這個欄位的格式由 java SimpleDateFormat 類別指定。
顯示註解 布林值 否 如果設為 true，圖表會在所選值的頂端顯示註解。 將這個選項設為 true 時，每個數值欄後方可新增兩個選用註解字串欄，一個用於註解標題，另一個用於註解文字。
顯示註解篩選器 布林值 否 如果設為 true，圖表會顯示篩選器篩選器，用來篩選註解。 如果有許多註解，請使用這個選項。
顯示日期列分隔符 布林值 true 是否在序列值和圖例中的日期之間顯示小型長條分隔符 ( | )，其中 True 表示是。
顯示確切值 布林值 否 為節省空間，在圖表頂端顯示短值的圓角值；設為 false 表示可能。例如，如果設定為 false，56123.45 可能會顯示為 56.12k。
顯示圖例 布林值 true 是否在圖例文字中的值旁邊顯示半形句點，其中 true 表示是。
displayLegendValues 布林值 true 是否在圖例中顯示醒目顯示的值 (如果代表 true 代表是)。
顯示範圍選取器 布林值 true

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

縮放選取器的外框是圖表中最後一個系列的記錄資源調度版本，可縮放至符合縮放選取器的高度。
displayZoomButtons 布林值 true 是否顯示縮放連結 (「1d 5d 1m」，依此類推)，其中 false 表示否。
填滿 數字 0 從 0 到 100 (含) 的數字，表示在折線圖中，每行下方的填滿 Alpha 值。100 表示 100% 不透明填充，0 表示完全不填滿。填滿顏色與上方的線條相同顏色。
點亮點 string 「Narest」

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

  • 'nearest' - 最靠近 X 軸的值。
  • 「last」：滑鼠左側的下一組值。
圖例位置 string 「sameRow」 使用 [縮放] 按鈕和日期 (「sameRow」) 或新的資料列 (「newRow」) 將相同顏色的圖例放在同一列。
最高 數字 自動 Y 軸的最大值。如果資料點上限超過這個值，系統會忽略這項設定，且會調整圖表以在下一個資料點上方顯示下一個主要刻點。這個優先順序會高於 scaleType 決定的 Y 軸最大值。
分 數字 自動 Y 軸上顯示的最小值。如果資料點下限低於這個值，系統會忽略這項設定，並調整圖表以在最低資料點下方顯示下一個主要刻點。這個優先順序會高於 scaleType 決定的 Y 軸最小值。
numberFormats 字串，或數字：字串組合的對應關係 自動

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

模式的格式必須符合 java DecimalFormat 類別指定的格式。

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

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

指定要在圖表中的 Y 軸刻點顯示的值。預設設定是右側採用單一縮放比例，適用於兩個序列。不過，您可以將圖表的不同邊縮放至不同的序列值。

這個選項使用 0 到 3 個數字的陣列，以指定係列的 (零) 索引值，做為擴充值。顯示值的位置取決於您在陣列中加入的值數量：

  • 如果您指定空白陣列，圖表就不會顯示在刻點旁邊。
  • 如果您指定一個值，指定序列的比例只會顯示在圖表右側。
  • 如果您指定兩個值，第二個序列則會在圖表右側新增一個比例。
  • 如果您指定三個值，則第三層的資源調度會新增至圖表中間。
  • 系統會忽略陣列中第三個值之後的所有值。

顯示多個比例時，建議您將 scaleType 選項設為「allfixed」或「allmaximized」。
scaleType string 「固定」

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

  • 「maximized」(最大化) - Y 軸將橫跨同系列的最小值。如果您有多個系列，請使用 allmaximized。
  • 'fixed' [default] - Y 軸會因資料值的值而有所不同：
    • 如果所有值 >=0，Y 軸就會從零到最大資料值。
    • 如果所有值小於 <=0，那麼 Y 軸範圍會從零到最低的資料值。
    • 如果數值同時為正數和負數，Y 軸將由系列的最大值到系列的最小範圍。

      如有多項系列作品，請使用「allfixed」。
  • 'allmaximized' - 與「maximized」相同，但會在顯示多個比例時採用。兩張圖表將以相同比例將最大化，也就是說，Y 軸代表圖表不會遭到誤判，但只要將滑鼠遊標懸停在每個序列上方，就會顯示該值。
  • 'allfixed' - 與「fixed」相同，但會在顯示多個比例時採用。 這項設定將調整每個調整規模，使其套用至所套用的系列 (搭配 scaleColumns 使用)。

如果您指定最小和/或最大選項，這些選項的優先順序高於您的資源調度類型決定的最小值和最大值。
厚度 數字 0 介於 0 到 10 (含) 之間的數字，用於指定線條粗細，其中 0 代表最細。
Wmode string 窗口 Flash 圖表的「視窗模式 (wmode)」參數。可用的值包括「opaque」、「window」或「透明」。
zoomEndTime 日期 無 設定所選縮放範圍的結束日期/時間。
zoomStartTime 日期 無 設定所選縮放範圍的開始日期/時間。

方法

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

活動

名稱 說明 屬性
範圍變化 縮放範圍已變更。在使用者修改可見時間範圍後觸發，但在呼叫 setVisibleChartRange 方法之後不會觸發。
注意：我們不建議使用事件屬性，而是透過呼叫 getVisibleChartRange 方法取得這些屬性。
  • start：日期。縮放範圍的開始時間。
  • end：日期。縮放範圍的結束時間。
已就緒 圖表可供外部方法呼叫使用。如果您想要與圖表互動，並在繪製圖表後呼叫方法，請先為這個事件設定事件監聽器，然後再呼叫 draw 方法，且只在事件觸發後呼叫這些方法 無
選取 當使用者按一下註解標記 (標記) 時，就會選取資料表中對應的儲存格。視覺呈現隨後會觸發此事件。 無

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

資料政策

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

注意事項

由於 Flash 安全性設定，因此，從瀏覽器的檔案位置 (例如 file:///c:/webhost/myhost/myviz.html) 存取時，您 (以及所有以 Flash 為基礎的視覺化內容) 可能無法正確運作，而非透過網路伺服器網址存取 (例如：http://www.myhost.com/myviz.html)。這通常是測試問題。如要解決這個問題，請前往 Macromedia 網站。