google chart logo
google chart_1google chart_2google chart_3google chart_4google chart_5google chart_6

Google Charts - 開發者專用!資料分析完全圖表化

  1. 強大、免費的資料分析工具
  2. 對開發者來說操作簡單
  3. 能將所有資料用圖表化的方式呈現

馬上試用

貨號: A0334 分類: ,

商品說明

Google chart 是一款強大又簡易使用,還是免費的資料分析工具,屬於 Google Developers 裡的產品。Google Chart 提供你網站內最真實的資料,將所有資料都可以用圖表化的方式呈現。只要給它 JavaScript,它就給你所渴望的圖表。

接下來就來看看怎麼用吧!


操作流程

進入後,請按下"Get Started"。不需要註冊就可以馬上體驗囉!只是稍後會有許多的原始編碼,不擅長程式的朋友們,要做好心理準備喔!

google chart_1

接下來,會依左方紅框的區塊,製作圖表的步驟,為大家介紹喔!
google chart_2


Loading the Libraries 上傳資料庫

一個圖表需要三種資料庫: Google JSAPI API、Google Visualization library、圖表本身所有的資料。

而這些資料庫由下圖的編碼中兩個<script>上傳。

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 這部分上傳有關 JSAPI library

<script type="text/javascript"> 這部分則上傳有關 Google Visualization 和圖表本身的資料庫。

google chart_3


Preparing the data 準備資料

所有的圖表都需要資料。Google Chart 透過 JavaScript 建立資料,這部分被稱作 google.visualization.DataTable,是由於先前上傳的 Google Visualization library。

一個資料表(Data Table)為二維資料表,每個欄位都有資料類型、可選擇的 ID、可選擇的標籤。

google chart_4


Customizing the Chart 客製化圖表

每個圖表都需要客製化的選項,包含標題、顏色、線條粗細等等。雖然這款工具已盡量讓整體圖表美觀,但為了你可能有客製化的需求,而提供此項服務。使用選項清單中列出的項目,每個圖表文件都設有一系列的客製化選項。如下圖黃色區塊所示。

google chart_5


Drawing the Chart 繪製圖表

這是製作圖表的最後一個步驟囉!你必須例示出想使用的圖表類別,然後必須要對原始碼做編輯,記得加上 draw() 喔!

下方為範例: // Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

<!–Div that will hold the pie chart–>
<div id="chart_div" style="width:400; height:300″></div>

google chart_6

和使用者互動的部分可以參考 Adding Interactivity,那部分會有完整的解說。如果你真的毫無頭緒的話呢,可以點選"Hello Charts!"就會出現快速用法。只要複製所有出現的原始碼,儲存到記事本中,再以瀏覽器打開,就可以囉!如果你不想要用圓餅圖的話,在google.visualization.PieChart 的地方,把 Pie 改成 Bar 就可以了,也可以直接對這個原始碼進行編輯。

 

額外資訊

硬體需求

桌機、平板

作業系統

WINDOWS / iOS

瀏覽器版本

Chrome / FireFox / IE9 以上

還想知道更多數位新知?快來訂閱 dcplus 關鍵分享報

您希望收到哪些資訊呢?