小狐狸事務所: jQuery Mobile 學習筆記 (二十一) : 用 jqPlot 繪圖 (2) : 長條圖

在上一篇測試中已完成 jqPlot 預設的折線圖測試, 參考 :

# jQuery Mobile 學習筆記 (二十) : 用 jqPlot 繪圖 (1) : 折線圖

本篇記錄長條圖之測試, 這必須另外匯入 barRenderer 與 categoryAxisRenderer 函式庫, 由於前一篇測試所使用的 CDN 網站 cdn.jsdelivr.net 並未提供這兩個函式庫, 因此本篇開始改用 cdnjs.cloudflare.com 所提供的 CDN 服務, 參考 :

# https://cdnjs.com/libraries/jqPlot

以下是長條圖測試所需繪入的全部函式庫如下 :

jqPlot 的長條圖教學文件參考:

# http://www.jqplot.com/examples/barTest.php

下面是基本長條圖的範例, 此圖只有一組資料, 但選項設定重點是在 renderer 屬性 :

測試 1 : 繪製一組資料之長條圖 : 總統大選得票數 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<style>

</style>

<body>

<h1>jqPlot 長條圖</h1>

</header>

</article>

</footer>

</section>

$(function(){

var data=[[608590, 5522119, 8170231]];

var ticks=["宋楚瑜", "韓國瑜", "蔡英文"];

var options={title: "2020 台灣總統大選得票數",

seriesDefaults:{renderer: $.jqplot.BarRenderer,

pointLabels: {show: true}},

axes: {xaxis: {renderer: $.jqplot.CategoryAxisRenderer,

ticks: ticks}}

};

$.jqplot('chart', data, options);

});

</script>

</body>

</html>

結果如下 :

測試網頁 QR code 如下 :

上例只有一組序列 (series) 資料, 即各候選人之得票數, 如果有兩組以上資料要用長條圖呈現做比較, 只要在 data 參數傳入多組資料即可, 另外, 對於多組資料必須附上圖例 (legend), 否則會讓人搞不清楚哪個柱狀圖代表哪一組資料, 例如比較近五年元大 ETF 0050 與 0056 之配息 :

測試 2 : 繪製多組資料之長條圖 : 元大 0050 與 0056 近五年配息比較 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<style>

</style>

<body>

<h1>jqPlot 長條圖</h1>

</header>

</article>

</footer>

</section>

$(function(){

var div0050=[0.85, 2.4, 2.9, 3, 3.6];

var div0056=[1.3, 0.95, 1.45, 1.8, 1.6];

var ticks=["2016","2017", "2018", "2019", "2020"];

var options={title: "元大 0050 vs 0056 配息 (元)",

animate: !$.jqplot.use_excanvas,

seriesDefaults:{renderer: $.jqplot.BarRenderer,

pointLabels: {show: true}},

axes: {xaxis: {renderer: $.jqplot.CategoryAxisRenderer,

ticks: ticks}},

series: [{label: "0056"},

{label: "0050"}],

legend: {show: true,

location: "nw"}

};

$.jqplot('chart', [div0056, div0050], options);

});

</script>

</body>

</html>

此處為了清楚起見, 將兩組資料 s1, s2 各以一維陣列表示, 然後外面再套一層 [s1, s2] 變成二維陣列, 結果如下 :

測試網頁 QR code 如下 :

如果希望在點擊柱狀時得知其值, 可將畫布綁定 jqplotDataClick 事件, 從其事件處理回呼函數的 data 參數即可取得該圖形中被點擊之長條之值, 例如 :

測試 3 : 繪製多組資料之長條圖 : 綁定 jqplotDataClick 事件 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<style>

</style>

<body>

<h1>jqPlot 長條圖</h1>

</header>

</article>

</footer>

</section>

$(function(){

var div0050=[0.85, 2.4, 2.9, 3, 3.6];

var div0056=[1.3, 0.95, 1.45, 1.8, 1.6];

var ticks=["2016","2017", "2018", "2019", "2020"];

var options={title: "元大 0050 vs 0056 配息 (元)",

seriesDefaults:{renderer: $.jqplot.BarRenderer,

pointLabels: {show: true}},

axes: {xaxis: {renderer: $.jqplot.CategoryAxisRenderer,

ticks: ticks}},

series: [{label: "0056"},

{label: "0050"}],

legend: {show: true,

location: "nw"}

};

$.jqplot('chart', [div0056, div0050], options);

$('#chart').on('jqplotDataClick', function (e, series, point, data) {

var html='series:' + series + ', point: ' + point + ', data: ' + data;

$('#info').html(html);

});

</script>

</body>

</html>

此例是從上面測試 2 修改而來, 主要是在畫布下添加一個 id="info" 的 div 元素, 以及為畫布綁定 jqplotDataClick 事件, 其回呼函數匯傳入四個參數, e 為事件物件, series 為資料組別索引 (0 起始), point 是資料點的索引 (0 起始), data 是資料, 但它是由 [序號 (1 起始), 資料] 組成的陣列, 所以真正的資料本身是 data[1], 結果如下 :

此圖為點擊最右邊 2020 年 0050 配息之長條, 顯示其配息為 3.6 元. 測試網頁 QR code 如下 :

長條圖也可以水平呈現, 只要將 X, Y 軸交換即可, 作法上需將 barDirection 屬性設為 horizontal, 同時 axes 屬性要將 Y 軸繪圖器指定為 CategoryAxisRenderer, 例如 :

測試 4 : 繪製多組資料之長條圖 : 水平繪製的長條圖 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<style>

</style>

<body>

<h1>jqPlot 長條圖</h1>

</header>

</article>

</footer>

</section>

$(function(){

var div0050=[0.85, 2.4, 2.9, 3, 3.6];

var div0056=[1.3, 0.95, 1.45, 1.8, 1.6];

var ticks=["2016","2017", "2018", "2019", "2020"];

var options={title: "元大 0050 vs 0056 配息 (元)",

seriesDefaults:{renderer: $.jqplot.BarRenderer,

pointLabels: {show: true},

rendererOptions: {barDirection: 'horizontal'}},

axes: {yaxis: {renderer: $.jqplot.CategoryAxisRenderer,

ticks: ticks}},

series: [{label: "0056"},

{label: "0050"}],

legend: {show: true,

location: "se"}

};

$.jqplot('chart', [div0056, div0050], options);

$('#chart').on('jqplotDataClick', function (e, series, point, data) {

var html='series:' + series + ', point: ' + point + ', data: ' + data;

$('#info').html(html);

});

</script>

</body>

</html>

結果如下 :

測試網頁 QR code 如下 :

參考 :

# jqPlot 圖表中文API使用文件及原始碼和線上示例

小狐狸事務所

2021年3月8日星期一

jQuery Mobile 學習筆記 (二十一) : 用 jqPlot 繪圖 (2) : 長條圖

沒有留言:

張貼留言

2021年3月8日 星期一

jQuery Mobile 學習筆記 (二十一) : 用 jqPlot 繪圖 (2) : 長條圖

沒有留言:

張貼留言

2021年3月8日星期一