資料圖形化呈現一直都是人們最容易接收的方式, 往往一張圖表的呈現, 勝過千言萬語的解說, 因此適時的資料圖形化, 確實有其魅力. 坊間更是有很多繪圖用 libraries 供 front end engineer 做些有趣的圖表應用, 比方說 D3.js 、 charts.js … etc.
有些時候這些 libraries 的學習門檻過高, 讓 developer 卻步, 亦或是實際使用需求比較陽春, 如果 require 過於龐大的 script 可能造成 page performance 上的損耗.
為了讓 developer 可以快速的將圖表於 web page 中呈現, 筆者便開發了 lineCharts 這個 web components, 透過簡單的 HTML tag 設定, 便可以輕輕鬆鬆完成基本的 line chart. 所有繪製用的 method 均內建在該 web components 中, 不需要再 require 額外的 JavaScript, 方便 developer 可以快速的導入
※ 歡迎點擊下方連結進行觀看 : – lineCharts: http://mei.homin.com.tw/lineChartPr… – lineCharts(github): https://github.com/meistudioli/line…
在上面的 demo link 中, 我們可以透過頁面上 select 的切換來動態更換當前圖表的呈現, < line-charts> 支援 line chart & area chart, 另外, 它也可以雙 Y 軸呈現, 讓資料的呈現更加多元, 方便不同資料在同一圖表中呈現, 我們來看看 demo 中的各種應用
- Line chart (basic): 最基本的應用, 單一 X 以及 Y 軸的設定, 可以設定 N 條 data 呈現
Line chart (basic)
- Line chart with 2 axis-Y: 雙 Y 軸表述, 某些時候資料的呈現所代表的數據可能無法融合在一起的時候, 便可以使用這類的呈現, 什麼情況會用到雙 Y 軸呢 ?! 比方不同數據的單位可能不同, 這時後想將不同單位的資料在同一圖表中作呈現, 便可以使用這樣的呈現方式, 下圖的範例是以 device 作區隔, 左側的 axis Y 代表的是 iPhone7 以及 iPhone6, 右側的 axis Y 代表的是 iPad
Line chart with 2 axis-Y: 雙 Y 軸表述
- Stacked area chart: area chart 的變形應用, 對於某些可以被 group 的 data 來說, 使用 area chart 可能可以更增進資料的閱讀性, 以下圖為例, iPhone 6 的呈現便是架構在 iPhone 7 之上所繪製
Stacked area chart
- Stacked area chart & line chart: 透過 multi-axis Y 來做 line & area chart 的靈活應用, 我們可以針對不同的 axis Y 來決定要呈現的 chart 是哪一種類型, 以下圖為例, 右側的 axis Y 所代表的是 iPad, 它是以 line chart 的格式呈現, 左側的 axis Y 則是選擇了用 stacked area chart 的格式, chart type 不會受左右側 axis Y 的制約, 不過筆者不見 multi-axisY 都採用 area chart, 因為那會增加 chart 的複雜度, 不利 user 閱讀
Stacked area chart & line chart
不管是 chart type 的設定為何, 只要 <line-charts> 有 hover 的情況發生, 便會有個 tip window 出現並且將當前位置的 data 展開供 user 作更詳細的分析
line-chart:hover 便會有 tip window 描述當前位置的細部 data
以上便是 <line-charts> 的應用, 為了增加它的可用性, 筆者更為 <line-charts> 增加一些實用的 feature, 只要 <line-charts> 被 hover 時, 便可以在 tip 視窗中看到當前位置所代表的詳細數據, 此外更具備了 export 的功能, 可以選擇要匯出的檔案格式, 目前支援 CSV 以及 image, 只要在 <line-charts> 上點擊滑鼠右鍵, 在出現的 content menu 中作選擇即可
<line-charts> 具備 export 的功能, user 可以選擇要 export 的 format, 只要在 <line-charts> 上點擊滑鼠右鍵開啟 content menu 進行選擇
如何套用 <line-charts> 到 web page 中 ?
lineCharts 底層實作是以 SVG 為主, 所以 browser 有無支援 SVG 便成了主要的關鍵, 基本上一些主流的 browser 幾乎都有支援(包含 mobile browser), 接下來我們就來看看要如何使用 lineCharts 這個 web components
lineCharts 是一個獨立的 web component, 所有的行為和樣式都完整的封裝起來, developer 只要將特定的 HTML tag – <line-charts> 放入頁面上任何想要擺放的位置即可, 不需要額外作任何 JavaScript init 的動作
HTML:
<line-charts> <h3>line-charts</h3> <var data-conf='JSON String'>line chart config</var></line-charts>
另外, JavaScript 也要將之 require 進來
<script async src="script/pack-line-charts.js"></script>
由於 lineCharts designed by native JavaScript, 所以不管當前 website 是使用什麼樣的 framework, 皆可以正常運作, 不會受到任何影響
lineCharts 初始化資料的餵可以透過其 child element – <var> 來取得, 如上例所示, 我們可以將資料以 JSON String 的方式置入 data-conf 這個 attribute, 透過 config 的設置, 讓 developer 有更多元應用以及控制權, 接下來我們來看看 data-conf 的內容吧!
{ "axisX": { "ticks": 5, "labels": [ { "abbr": "Oct 1", "full": "Oct 1, 2016" }, { "abbr": "Oct 2", "full": "Oct 2, 2016" }, { "abbr": "Oct 3", "full": "Oct 3, 2016" }, { "abbr": "Oct 4", "full": "Oct 4, 2016" }, { "abbr": "Oct 5", "full": "Oct 5, 2016" } ] }, "axisY": { "ticks": 3, "data": [ { "enableFloat": false, "isStackedAreaChart": false, "lines": [ { "id": "model0", "title": "iPhone6", "points": [1200, 500, 2400, 2126, 1658], "color": "#2cbcff", "opacity": 1 }, { "id": "model1", "title": "iPhone7", "points": [836, 1400, 600, 2600, 2400], "color": "rgba(192,208,224,1)", "opacity": 1 } ] }, { "enableFloat": false, "isStackedAreaChart": false, "lines": [ { "id": "model2", "title": "iPad", "points": [1200, 500, 2400, 2126, 1658], "color": "#6a6acc", "opacity": 1 } ] } ] }}
如上所示, 該 config 主要是由 axisX 和 axisY 所構成, 分別表示 X 軸以及 Y 軸的資料呈現
axisX:
- ticks: 設定 X 軸呈現刻度的數量, 如果沒有特意設定, 其 default value 就會是全部呈現, 此外, lineCharts 也會根據當前 chart width 來做動態切換, 如果 width 越小, 則呈現的刻度也會變少, 避免過多的資訊幾在一塊兒造成閱讀困難
- labels: 設定 X 軸刻度顯示的文字, 每一個元素分別由 abbr 和 full 所組成, 兩者的差別為 abbr 為 chart 刻度上文字, 而 full 則用在 tip 視窗上面的呈現
axisY:
- ticks: 設定 Y 軸呈現刻度的數量, 不管當前有個 Y 軸, 皆是以此設定為主
- data: 設定 Y 軸的資料, 其長度決定當前 chart 的 Y 軸數量, 如上面範例, 我們可以看到 data.length > 1, 這表示說 chart 將會以 multi-axisY 來作呈現, data elment 主要是由 enableFloat, isStackedAreaChart 以及 lines 所組成 – enableFloat: Y 軸刻度是否支援小數呈現, 如果支援的話則會取小數點第一位, 反之, 如果不支援的話且當前刻度算出來有小數點, 則該刻度便不會呈現, 這樣的設定適合用在部分不支援小數位的資料上, 比方說 pageView / click, 我想不會有人希望看到我今天有 6.5 個 click 這種不合理的資料吧! – isStackedAreaChart: 設定當前 chart type 是否為 area chart, 如果設定 true 即為 area chart, 反之則代表其 chart type 為 line – lines: 設定要呈現的線條, developer 可以在此設定預呈現的線條, 原則上 lines.length 便是當前呈現的線條總量, 每一條 line 可以有 id, title, points, color 以及 opacity 的設定, 其中 points 便是對應 X 軸的資料集合, title 則會在 tip 視窗揭露的訊息中被使用到, 另外 color 以及 opacity 則是讓 developer 針對 line 的顏色以及透明度作客製化的多元應用
只要完成以上的 config 設定, 便可以輕輕鬆鬆繪製出所需要的圖表喔! 接下來, 筆者將介紹 lineCharts 所支援的一些 method, developer 可以透過這些 method 來做更多靈活的應用
<line-charts> 所支援的 method
- set: 用來設定 lineChart 的內容, 如果需要動態調整其內容的話, 便可以透過這個 method 來做
var data;
data = { axisX: { labels: [ {abbr: 'mei0', full:'mei0}, {abbr: 'mei1', full:'mei1} ] }};$('line-charts').set(data);//modify axisX
data = { axisY: [ ... ... ... ]};$('line-charts').set(data);//modify axisY
data = { axisX: {...} axisY: {...}};$('line-charts').set(data);//modify axisX & axisY
- get: 用來取得當前特定資料, 主要用來做資料驗證
$('line-charts').get('axisX');$('line-charts').get('axisY');$('line-charts').get('CSV');//get CSV data
- ticks: 設定 X 軸或者 Y 軸的刻度總量
$('line-charts').ticks('x', 10);//set axisX ticks amount$('line-charts').ticks('y', 2);//set axisY ticks amount
- addCallback: 動態綁定 callBack function, 當 lineCharts 有出現 mouseover || mouseout || mousemove || contentmenu 狀態的時候, 便會 call 我們所綁定的 callBack function (同樣的 callBack function 不會進行重複綁定)
function callback(action, serial, data, host) { //do something}
$('line-charts').addCallback(callback);
- removeCallback: 動態移除 callBack function (callBack function 非在綁定 queue 中時, 則不會作任何處理)
$('line-charts').removeCallback(callback);
- refresh: 有些時候我們希望可以強迫刷新當前 chart 的 的資料, 比方說 container 寬高有了變化, 便可以透過這個 method 來到我們的需求 (lineCharts 內建 resize event, 所以視窗大小有變化時, 會自動進行 redraw 的動作, 不需要額外 call 這個 method 喔)
$('line-charts').refresh();$('line-charts').refresh(true);//redraw with animation
- line-charts.export: 透過 prop 設定來開啟或關閉 export CSV 功能
$('line-charts').export = true;//turn on CSV export feature$('line-charts').export = false;//turn off CSV export feature
透過以上這些 method 的加入, 相信 developer 可以更加有效的掌控 lineCharts, 有興趣的朋友們請不用客氣, 可以直接使用, 也請不吝一同討論與指教喔!
Q & A
- 如果 <line-charts> 一開始並沒有準備 line 的 data 的話, 會不會有什麼問題 ? Ans: 如果 data-conf 沒有準備資料的話, <line-charts> 一樣會有制式的 grid 呈現, 不過 axisX & axisY 並不會有任何的 info 呈現, developer 可以在任何時間透過 $(‘line-charts’).set 來動態更換其內容
- 我可以動態更改 X 軸或者 Y 軸呈現的刻度嗎 ? Ans: lineChart 有額外抽出一個 method:ticks 來方便 develoer 來做刻度數量的更動, 另外如果想要更動的內容不僅僅是刻度的數量, 也可以透過 set 來作更加完整的變化
- 我的 container 寬高可能會會動態作更換, 這時後 lineCharts 的呈現可能會變形, 這時候我該怎麼辦 ? Ans: 可以直接 call lineCharts 的 refresh, 當它被呼叫時, 便會重新繪製 lineCharts 裡面的內容
- 要如何追蹤使用成效呢 ? Ans: lineCharts 已經內建 gaExt 的成效追蹤, 當有 mouseover || mouseout || mousemove || contentmenu 這些 event 發生時, 便會順利發出 beacon, 當然如果您的服務便沒有 align gaExt 這樣的 lib 時, 也可以搭配 addCallback 這個 method 來設定回呼函式, 再經過回呼函式來發送 beacon 即可
測試環境:
- OS: Windows 7
- Browser: Chrome Version 54.0.2840.99 m (64-bit) , Firefox 50.0, Internet Explorer Version 11.0.9600.18282
