重要資訊:自 2012 年 4 月 20 日起,Google 圖表的「圖片圖表」部分已正式淘汰。根據淘汰政策,這項政策仍然有效。
簡介
使用 Google Charts API 算繪為圖片的區域面積圖。
範例
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imageareachart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
載入中
google.charts.load
套件名稱為 "imageareachart"
google.charts.load('current', {packages: ['imageareachart']});
視覺化的類別名稱是 google.visualization.ImageAreaChart
var visualization = new google.visualization.ImageAreaChart(container);
資料格式
每一欄代表圖表中的某一行;每個項目都是位於相同 X 軸的 Y 軸值,而視覺元素會以直線連接,並填滿線條下方的區域。
系統會依資料欄處理資料,從 0 欄開始增加。您先先寫出最高行,再寫下幾行,因此,嘗試讓資料欄 1 的點比資料欄 2 高,第 2 欄高於第 3 欄,依此類推。若您的右欄比左欄高出一到兩個點,那麼它可能仍會被隱蔽的局部遮蔽,但還是應該可見。
除所有資料以外,所有資料都是數字類型,可以是數字或字串。如果第一個資料欄是字串類型,第一個資料欄項目會在 X 中顯示為標籤;如果第一個資料欄是數字,則不會顯示 X 軸標籤。所有資料欄 (第一個資料欄除外) 都必須為數字。資料欄數量沒有限制。
設定選項
名稱 | 類型 | 預設 | 說明 |
---|---|---|---|
backgroundColor | string | 「#FFFFFF」(白色) | 圖表 API 色彩格式的圖表背景色彩。 |
顏色 | 陣列<string> | 自動 | 可用來為每個資料序列指派特定顏色。您可以透過圖表 API 色彩格式指定顏色。資料欄 i 用於資料欄 i,如果資料欄比顏色多一點,則會在開頭加上換行。如果所有系列都接受單一顏色的變化版本,請改用 color 選項。 |
啟用事件 | 布林值 | 否 | 讓圖表擲回使用者觸發的事件,例如點擊或滑鼠懸停。 僅適用於特定圖表類型。請參閱下方的活動一節。 |
height | 數字 | 容器高度 | 圖表的高度,以像素為單位。 |
傳說 | string | 「右」 | 圖例的位置和類型。可能是下列其中一個值:
|
最高 | 數字 | 自動 | Y 軸的最大值。 |
分 | 數字 | 自動 | Y 軸顯示的最小值。 |
showCategoryLabels | 布林值 | true | 如果設為 False,請移除類別標籤 (X 軸標籤)。 |
showValueLabels | 布林值 | true | 如果設為 False,請移除值的標籤 (Y 軸標籤)。 |
title | string | 無標題 | 圖表上方顯示的文字。 |
valueLabels 間隔 | 數字 | 自動 | 顯示值軸標籤的時間間隔。舉例來說,如果 min 為 0、max 為 100 和 valueLabelsInterval 為 20,則圖表會顯示 (0, 20, 40, 60, 80 100) 的軸標籤。 |
width | 數字 | 容器寬度 | 圖表的寬度 (以像素為單位)。 |
方法
方法 | 傳回類型 | 說明 |
---|---|---|
draw(data, options) |
無 | 繪製圖表。 |
活動
您可以報名參加一般映像檔圖表頁面所述的事件。
資料政策
請參閱圖表 API 記錄政策。