數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2018年10月20日 星期六

「第一次」搞定圖表視覺化的呈現:flot




搞定圖表視覺化的呈現:flot
►視覺化,或圖表資料學,正紅。◄

一位申請到英國碩士的學生來說,那學校要求要有資料圖表數據的能力。那麼,我們就來學 flot 這個簡單的圖像化程式。

選用這個模型,是因為這是最常用的。
二組數據線條,可以呈現出比較以及時間的變化。


下列資料請放到< head>xxx</head>之間:

<style type="text/css">
#flot-placeholder{width:570px;height:400px; margin: auto;}  
 /*<<放圖表的DIV設定*/
</style>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/jquery.flot.min.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/jquery.flot.time.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/flot-0.8.3/flot/flot-axislabels-master/jquery.flot.axislabels.js"></script>


<script type="text/javascript">
var data1 = [[3, 130], [4, 40], [5, 80], [6, 160], [7, 159], [8, 200]];   
 /*<<黃色折線的數據結構。 [3, 130]是指x軸 3月,y軸按讚數130。 數字請使用半型數字。*/
var data2 = [[3, 170], [4, 30], [5, 120], [6, 100], [7, 119], [8, 210]];   
 /*<<藍色折線的數據結構。如果只要 一條線,這組不要有就成了。*/

var dataset = [{label: "李某人",data: data1},   
 /*<<黃色折線的說明文字*/
{label: "陳某人", data: data2}   
 /*<<藍色折線的說明文字。如果只 要一條線,這組不要有就成了。同時上面那組最後的「,」要拿掉。*/

];

var options = {
series: {
lines: { show: true },

points: {
radius: 3,
show: true
}
},

xaxis: {

axisLabel: "月分",     /*<< X軸的說明文字*/
tickSize: 1
},

yaxis: {

axisLabel: "按讚數"     /*<< Y軸的說明文字*/
}

};

$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
</script>



這是要呈現圖表的 HTML設置,放於<body>xxx</body>之間:

<div id="flot-placeholder"><br>
</div>


圖表的呈現: