IPv6 學習筆記 004 – 將擷取到的 ASes 資料畫圖，以 Google jsapi 實作
簡述
承接前篇「 IPv6 學習筆記 003 – 從 Ripe NCC 擷取各國 ASes 的資料，以 Python 實作」，將抓到的資料拿來畫圖。
畫圖有很多種方法，譬如用 jpggragh 這個 PHP 的 library，或是直接借用 Google 現成的jsapi 畫圖，而不需自己生產所需的 jQuery，初步完成圖請參考此頁。
HTML 內容
這是一個靜態的 HTML ，畫出台灣這十年來 ASes 資料中， IPv6 的成長狀況。HTML 內容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Percent');
data.addRows([
[new Date(2004,0,01),15.0],
[new Date(2004,1,01),15.0],
[new Date(2004,2,01),12.0482],
[new Date(2004,3,01),11.7647],
[new Date(2004,4,01),11.4943],
[new Date(2004,5,01),11.4943],
[new Date(2004,6,01),12.7907],
[new Date(2004,7,01),12.7907],
[new Date(2004,8,01),12.6437],
[new Date(2004,9,01),12.6437],
[new Date(2004,10,01),12.5],
[new Date(2004,11,01),12.5],
[new Date(2005,0,01),11.236],
[new Date(2005,1,01),12.0879],
[new Date(2005,2,01),13.0435],
[new Date(2005,3,01),12.0879],
[new Date(2005,4,01),13.1868],
[new Date(2005,5,01),12.3596],
[new Date(2005,6,01),15.7303],
[new Date(2005,7,01),15.9091],
[new Date(2005,8,01),16.8539],
[new Date(2005,9,01),13.3333],
[new Date(2005,10,01),12.5],
[new Date(2005,11,01),14.7727],
[new Date(2006,0,01),14.6067],
[new Date(2006,1,01),13.6364],
[new Date(2006,2,01),11.3636],
[new Date(2006,3,01),11.1111],
[new Date(2006,4,01),13.3333],
[new Date(2006,5,01),13.3333],
[new Date(2006,6,01),11.9565],
[new Date(2006,7,01),10.5263],
[new Date(2006,8,01),12.6316],
[new Date(2006,9,01),14.5833],
[new Date(2006,10,01),14.5833],
[new Date(2006,11,01),14.5833],
[new Date(2007,0,01),14.5833],
[new Date(2007,1,01),14.5833],
[new Date(2007,2,01),14.5833],
[new Date(2007,3,01),15.625],
[new Date(2007,4,01),15.625],
[new Date(2007,5,01),15.7895],
[new Date(2007,6,01),14.8936],
[new Date(2007,7,01),15.9574],
[new Date(2007,8,01),16.129],
[new Date(2007,9,01),17.0213],
[new Date(2007,10,01),18.2796],
[new Date(2007,11,01),18.0851],
[new Date(2008,0,01),18.2796],
[new Date(2008,1,01),15.9574],
[new Date(2008,2,01),17.0213],
[new Date(2008,3,01),15.9574],
[new Date(2008,4,01),16.8421],
[new Date(2008,5,01),16.8421],
[new Date(2008,6,01),16.3265],
[new Date(2008,7,01),16.3265],
[new Date(2008,8,01),15.3061],
[new Date(2008,9,01),15.4639],
[new Date(2008,10,01),15.3061],
[new Date(2008,11,01),15.3061],
[new Date(2009,0,01),15.1515],
[new Date(2009,1,01),15.3061],
[new Date(2009,2,01),15.3061],
[new Date(2009,3,01),14.7059],
[new Date(2009,4,01),14.5833],
[new Date(2009,5,01),14.5833],
[new Date(2009,6,01),14.0],
[new Date(2009,7,01),14.7059],
[new Date(2009,8,01),14.7059],
[new Date(2009,9,01),15.2381],
[new Date(2009,10,01),15.2381],
[new Date(2009,11,01),13.8889],
[new Date(2010,0,01),14.1509],
[new Date(2010,1,01),14.1509],
[new Date(2010,2,01),14.1509],
[new Date(2010,3,01),13.3333],
[new Date(2010,4,01),14.2857],
[new Date(2010,5,01),13.2075],
[new Date(2010,6,01),12.963],
[new Date(2010,7,01),14.1509],
[new Date(2010,8,01),14.0187],
[new Date(2010,9,01),13.8889],
[new Date(2010,10,01),13.7615],
[new Date(2010,11,01),13.0841],
[new Date(2011,0,01),14.1509],
[new Date(2011,1,01),14.9533],
[new Date(2011,2,01),15.7407],
[new Date(2011,3,01),17.2727],
[new Date(2011,4,01),16.2162],
[new Date(2011,5,01),17.1171],
[new Date(2011,6,01),22.5225],
[new Date(2011,7,01),22.3214],
[new Date(2011,8,01),22.1239],
[new Date(2011,9,01),21.9298],
[new Date(2011,10,01),21.7391],
[new Date(2011,11,01),22.2222],
[new Date(2012,0,01),22.2222],
[new Date(2012,1,01),22.4138],
[new Date(2012,2,01),22.0339],
[new Date(2012,3,01),21.1864],
[new Date(2012,4,01),18.6441],
[new Date(2012,4,22),20.6612],
[new Date(2012,4,24),20.6612],
[new Date(2012,5,01),20.6612],
[new Date(2012,6,01),20.6612],
[new Date(2012,7,01),20.4918],
[new Date(2012,8,01),22.9508],
[new Date(2012,9,01),23.7705],
[new Date(2012,10,01),23.5772],
[new Date(2012,11,01),23.7705],
[new Date(2013,0,01),26.4463],
[new Date(2013,1,01),27.2727],
[new Date(2013,2,01),25.6198],
[new Date(2013,3,01),25.4098],
[new Date(2013,4,01),25.6198],
[new Date(2013,5,01),26.2295],
[new Date(2013,6,01),25.6198],
[new Date(2013,7,01),28.6885],
[new Date(2013,8,01),29.2683],
[new Date(2013,9,01),29.2683],
[new Date(2013,10,01),26.6129],
[new Date(2013,11,01),25.7812],
[new Date(2014,0,01),27.2],
]);
var options = {
title: 'TW Ases %',
hAxis: {title: 'Year' , format: 'yyyy/MM', ticks : [ new Date(2004,5,1), new Date(2007,5,1), new Date(2010,5,1) ,new Date(2013,5,1)]},
vAxis: {title: '%'}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->
1. 可以看到呼叫了 google.visualization.DataTable 來準備建立新的資料。
2. 用 data.addColumn、data.addRows分別新增欄位以及新增內容
3. 在data.addRows內，可以看到 new Date 的方式，這樣資料的型態會是日期，除日期外，可以為字串(離散資料點)或數字、日期、日期時間等等(連續資料點)。
資料點的資料型態，請參考：
https://developers.google.com/chart/interactive/docs/gallery/linechart#Data_Format
離散或連續，請參考：https://developers.google.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous
4. data.addRows 內，可以自己想法子用程式語言生成所需的數據，格式就如同上面所寫：
[ new Date(2004,0,01) , 15.0 ]
[ X軸值 , 第一筆Y軸值 ] (我只有一筆 Y)
5. var options 區段，訂定了顯示方式，其中，可以注意到我使用了 format 以及一些格式敘述來安排我的橫軸顯示，請務必注意， format 的顯示跟橫軸的資料型態有關係，像我寫的 format: ‘yyyy/MM’，唯有橫軸的資料是「日期」時才會生效。
詳細的格式與定義方法請參考
https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options
6. 最後，chart.draw(data, options); 使繪圖生效。
7. 還有各種圖表請參考：
https://developers.google.com/chart/interactive/docs/gallery
You Might Also Like
這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。
Leave a Reply