2021年3月8日 星期一

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

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


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


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

    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>

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


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



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  </head>
  <style>
  </style>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>jqPlot 長條圖</h1>
      </header>
      <article data-role="content">
        <div id="chart"></div>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script> 
      $(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 之配息 : 



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  </head>
  <style>
  </style>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>jqPlot 長條圖</h1>
      </header>
      <article data-role="content">
        <div id="chart"></div>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script> 
      $(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 參數即可取得該圖形中被點擊之長條之值, 例如 :



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  </head>
  <style>
  </style>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>jqPlot 長條圖</h1>
      </header>
      <article data-role="content">
        <div id="chart"></div>
        <div id="info"></div>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script> 
      $(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, 例如 : 



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  </head>
  <style>
  </style>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>jqPlot 長條圖</h1>
      </header>
      <article data-role="content">
        <div id="chart"></div>
        <div id="info"></div>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
    <script> 
      $(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 如下 :




參考 :


張貼者： 於
標籤： , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )