簡介
動態圖表，方便您探索多個指標的變化趨勢。圖表會使用 Flash 在瀏覽器中顯示，
開發人員注意事項：由於 Flash 的安全性設定，因此透過瀏覽器的檔案位置 (例如 file:///c:/webhost/myhost/myviz.html) 存取檔案時，系統 (以及 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);
資料格式
- 第一欄的類型必須為「string」，且包含實體名稱 (例如例如「Apples」、「Oranges」、「Bananas」。
- 第二欄必須包含時間值。時間可以採用下列格式：
- 後續資料欄可以是「數字」或「字串」類型。數字欄會顯示在 X、Y、顏色和大小軸的下拉式選單中。字串資料欄只會顯示在顏色的下拉式選單中。請參閱上述範例。
設定初始狀態
您可以指定動作圖表的開頭是從特定狀態開始，也就是一組所選實體和自訂檢視畫面。您必須先接下來的兩個章節將說明如何匯出並使用狀態碼。
- 開啟工作圖表，設定您要擷取的設定。您可以指定的設定包括透明度等級、縮放，以及記錄和線性調整。
- 按一下圖表右下角的扳手符號，開啟「設定」面板。
- 按一下左下角的 [進階] 連結，即可將這組「進階」面板加到組合。
- 展開「進階」面板，然後將「狀態」文字方塊的內容複製到剪貼簿。(注意：不要使用步驟 2 至 4 所述的選單，您可以在網頁中插入呼叫
getState()的按鈕，並在訊息框中顯示目前的狀態)。 - 將您在上一個步驟複製的狀態字串指派給程式碼中的「state」選項參數，如下所示。傳入
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);
設定選項
| 名稱 | 類型 | 預設 | 說明 |
|---|---|---|---|
| height | 數字 | 300 | 圖表的高度，以像素為單位。 |
| width | 數字 | 500 | 圖表的寬度 (以像素為單位)。 |
| 州 | string | 無 | 圖表的初始顯示狀態。這是序列化的 JSON 物件，用於說明縮放等級、所選維度、所選對話框/實體和其他狀態說明。請參閱設定初始狀態一文，瞭解如何設定。 |
| showChartButtons | 布林值 | true | false 會隱藏控制圖表類型 (對話框 / 行 / 欄) 的按鈕。 |
| 節目標題 | 布林值 | true | false 會隱藏實體的標題標籤 (衍生自資料表中第一欄的標籤)。 |
| showSelectListComponent | 布林值 | true | false 會隱藏可見實體清單。 |
| 節目側邊面板 | 布林值 | true | false 會隱藏右側面板。 |
| 顯示 X 指標選擇器 | 布林值 | true | false 會隱藏 x 的指標選擇器。 |
| 顯示指標 選擇器 | 布林值 | true | false 會隱藏 y 的指標挑選器。 |
| 節目 XScale Picker | 布林值 | true | false 會隱藏 x 的縮放選擇器。 |
| 節目 YScale 挑選器 | 布林值 | true | false 會隱藏 y 軸的挑選器。 |
| 顯示進階面板 | 布林值 | true | false 會在設定面板中停用選項空間。 |
方法
| 方法 | 傳回類型 | 說明 |
|---|---|---|
draw(data, options) |
無 | 以我們提供的選項繪製圖表。 |
getState() |
string | 傳回動態圖的目前狀態，已序列化為 JSON 字串。如要將此狀態指派給圖表，請將此字串指派給 draw() 方法中的 state 選項。這通常是用於在啟動時指定自訂圖表的狀態，而非使用預設狀態。 |
活動
| 名稱 | 說明 | 屬性 |
|---|---|---|
error |
嘗試轉譯圖表時發生錯誤。 | id、message |
| 已就緒 | 圖表可供外部方法呼叫使用。如果您想與圖表互動，並在繪製後呼叫方法，請先為這個事件設定事件監聽器，然後再呼叫繪圖方法，並且只在事件觸發後呼叫。 | 沒有任何通知 |
| 州別 | 使用者以某種方式與圖表互動。呼叫 getState() 可瞭解圖表的目前狀態。 |
無 |
資料政策
系統會處理所有程式碼和資料，並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。
注意事項
由於 Flash 安全性設定，因此，從瀏覽器的檔案位置 (例如 file:///c:/webhost/myhost/myviz.html) 存取網頁，而非透過網路伺服器網址 (例如 http://www.myhost.com/myviz.html) 存取時，此程式碼 (以及所有 Flash 型視覺呈現) 可能無法正常運作。這通常是測試問題。如要解決這個問題，請前往 Macromedia 網站。