視覺化：動態圖表

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

總覽

一種動態圖表，用於探索一段時間內的數個指標。系統會使用 Flash 在瀏覽器中呈現圖表。

開發人員注意事項：由於 Flash 安全性設定的關係，當您從瀏覽器的檔案位置 (例如 file:///c:/webhost/myhost/myviz.html) 存取時，這項設定 (以及所有 Flash 視覺呈現) 可能無法正常運作，而不是透過網路伺服器網址 (例如 http://www.myhost.com/myviz.html)。這通常只是測試問題。您可以依照 Adobe 網站中所述的方法解決這個問題。

範例

(請注意，以下程式碼在載入為本機檔案時無效；必須從網路伺服器載入)。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

載入中

google.charts.load 套件名稱為 "motionchart"。

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

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

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

資料格式

  • 第一欄 須為「字串」類型，且包含實體名稱 (例如「Apples」、「Oranges」、「Bananas」
  • 第二欄必須包含時間值。時間能以下列任一格式表示：
    • 年份 - 欄類型：「數字」。範例：2008。
    • 月、日和年 - 資料欄類型：「date」；值應為 JavaScript Date 例項。
    • 週數 - 資料欄類型：「string」；值應使用符合 ISO 8601 的 YYYYWww 格式。例如：「2008W03」。
    • Quarter (季度) - 資料欄類型：「string」(字串)；值的格式應為 YYYYQq，且符合 ISO 8601。例如：「2008Q3」。
  • 後續資料欄可以是「數字」或「字串」類型。數值欄會顯示在 X、Y、顏色和大小軸的下拉式選單中。字串欄只會顯示在「顏色」下拉式選單中。請參閱上方範例。

設定初始狀態

您可以指定動態圖表以特定狀態 (即一組所選實體) 和檢視區塊自訂項目開始。為此，您必須先建立並顯示圖表，然後進行您希望圖表顯示的任何狀態變更 (選取值、變更設定等)，然後將這些設定匯出為字串，最後在程式碼中使用這個字串並指派給「狀態」選項。以下兩節將說明如何匯出並使用狀態代碼。

  1. 開啟工作圖表，然後調整您要擷取的設定。您可以指定的不透明度等級、縮放、記錄與線性縮放。
  2. 按一下圖表右下角的扳手符號，開啟「設定」面板。
  3. 按一下左下角的「進階」連結，將「進階」面板新增至資料集。
  4. 展開「Advanced」面板，然後將「State」文字方塊的內容複製到剪貼簿。(注意：與其使用選單 (如步驟 2 至 4 所述)，您可以在網頁上插入呼叫 getState() 的按鈕，並在訊息方塊中顯示目前狀態。)
  5. 如下所示，將您在上一個步驟複製的狀態字串指派給程式碼中的「狀態」選項參數。傳遞至 draw() 方法時，系統會將圖表初始化為啟動時指定的狀態。
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

設定選項

名稱 類型 預設 說明
高度 號碼 300 圖表的高度 (以像素為單位)。
寬度 號碼 500 圖表的寬度 (以像素為單位)。
state 字串 圖表的初始顯示狀態。這是序列化的 JSON 物件，用於說明縮放等級、所選維度、所選對話框/實體和其他狀態說明。請參閱設定初始狀態，瞭解如何設定。
showChartButtons boolean true false 會隱藏右上角控制圖表類型的按鈕 (對話框 / 線條 / 欄)。
showHeader boolean true false 會隱藏實體的標題標籤 (衍生自資料表中第一欄的標籤)。
showSelectListComponent boolean true false 會隱藏可見實體清單。
showSidePanel boolean true false 會隱藏右側面板。
showXMetricPicker boolean true false 會隱藏 x 的指標挑選器。
showYMetricPicker boolean true false 會隱藏 y 的指標挑選器。
showXScalePicker boolean true false 會隱藏 x 的比例挑選器。
showYScalePicker boolean true false 會隱藏 y 的比例挑選器。
showAdvancedPanel boolean true false 會停用設定面板中的選項區段。

方法

方法 傳回類型 說明
draw(data, options) 無 依提供的選項繪製圖表。
getState() 字串 傳回已序列化為 JSON 字串的動態圖表state。如要將這個狀態指派給圖表，請將這個字串指派給 draw() 方法中的 state 選項。通常用於指定啟動時的自訂圖表狀態，而非使用預設狀態。

事件

名稱 說明 屬性
error 嘗試算繪圖表時發生錯誤時觸發。 id、message
已就緒 圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，請先為這個事件設定事件監聽器，再呼叫繪圖方法，並且只在事件觸發後呼叫這些事件監聽器。 沒有任何通知
狀態變更 使用者已透過某種方式與圖表互動，呼叫 getState() 即可取得圖表的目前狀態。 無

資料政策

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

注意事項

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