2020-04-22

【WEB程式】以 Chartjs 繪製圖表 

Chartjs 是一套免費且開放原始碼(採用 MIT 授權) 的網頁圖表繪製套件，可繪製 6 種基本圖表：
line(折線圖/線條圖)、bar(條狀圖，直/橫條)、radar(雷達圖)、doughnut & pie(圓餅圖/甜甜圈圖)、polar area(極座標圖餅圖/南丁格爾玫瑰圖/雞冠花圖/風花圖)、bubble(氣泡圖)，

2 種衍伸圖表(不知道這兩種圖表的中文名稱)：
scatter(散佈圖)、area

還可以上述 8 種圖表混合使用。


將 chartjs 上傳到您的網站內的指定目錄下，在本例為 /plugin/

PHP 網頁內容 
  1.  
  2. ...
  3. ...
  4. <head>
  5.     <script src="/jquery/jquery-1.11.3.min.js"></script>    <!-- jQuery 不是必需, 但我不熟純 javascript -->
  6.     <script src="/plugin/chartjs/Chart.bundle.min.js"></script>
  7.     <script src="/plugin/chartjs/Chart.min.js"></script>
  8.     <script src="/plugin/chartjs/chartjs-plugin-zoom.min.js"></script>
  9.     <script src="/plugin/chartjs/utils.js"></script>
  10.     <script src="/plugin/chartjs/moment-with-locales.min.js"></script>
  11. </head>
  12. <!-- 設定圖表尺寸 -->
  13. <style>
  14. .chart
  15. {
  16.   height:100; width:45%; margin: 20px;
  17. }
  18. </style>
  19.  
  20. ...
  21. ...
  22.  
  23. <body>
  24. <?php
  25.  
  26. // 宣告存放數據的陣列
  27. $aExname = array();     // 考試名稱
  28. $aDlday = array();      // 單日下載
  29. $aDlcnt = array();      // 總下載數
  30. $aExamday = array();    // 單日練習
  31. $aExamcnt = array();    // 總練習數
  32.  
  33. // 建立資料庫連線, 並取得資料
  34. $pdoStat = $pdo->prepare($sql);
  35. $pdoStat->execute();
  36. $rs = $pdoStat->fetchAll();
  37. if(count($rs)>0)
  38. {
  39.     foreach($rs as $row)
  40.     {
  41.         // 將各欄位值存入陣列
  42.         array_push($aExname, $row['exname']);  // 考試名稱
  43.         array_push($aDlday, $row['dlday']);  // 單日下載
  44.         array_push($aDlcnt, $row['dlcnt']);  // 總下載數
  45.         array_push($aExamday, $row['examday']);  // 單日練習
  46.         array_push($aExamcnt, $row['examcnt']);  // 總練習數
  47.     }
  48.     
  49.     // 將陣列自 PHP 轉出變為 javascript 陣列
  50.     // str_pad() 沒什麼作用, 只是讓轉出的 HTML 原始碼易於閱讀而已
  51.     echo str_pad(" ", 28)."<script language='javascript'>\n";
  52.     echo str_pad(" ", 28).'var aExname = '.json_encode($aExname).";\n"; // 考試名稱
  53.     echo str_pad(" ", 28).'var aDlday = '.json_encode($aDlday).";\n";   // 單日下載
  54.     echo str_pad(" ", 28).'var aDlcnt = '.json_encode($aDlcnt).";\n";   // 總下載數
  55.     echo str_pad(" ", 28).'var aExamday = '.json_encode($aExamday).";\n";   // 單日練習
  56.     echo str_pad(" ", 28).'var aExamcnt = '.json_encode($aExamcnt).";\n";   // 總練習數
  57.     echo str_pad(" ", 28)."</script>\n";
  58. }
  59. ?>
  60.  
  61. // 左, 右 放置 2 個直條圖
  62. <div class="chart" style="float:left;">
  63.   <!-- 各考試單日統計 -->
  64.   <canvas id="chartDay" />
  65. </div>
  66.  
  67. <div class="chart" style="float:right;">
  68.   <!-- 各考試總計 -->
  69.   <canvas id="chartTotal" />
  70. </div>
  71.  
  72. <script language='javascript'>
  73. var ctx1 = $("#chartDay");
  74. var myChart1 = new Chart(ctx1,
  75.                             {
  76.                                 type: 'bar',    // 指定圖表為直條圖
  77.                                 data: {
  78.                                         datasets: [{
  79.                                                     data: aExamday,
  80.                                                     label: "單日練習",
  81.                                                     borderColor: window.chartColors.green,    // 有這幾個基本顏色可選：red, orange, yellow, green, blue, purple, grey
  82.                                                     backgroundColor: window.chartColors.green
  83.                                                    },
  84.                                                    {
  85.                                                     data: aDlday,
  86.                                                     label: "單日下載",
  87.                                                     borderColor: window.chartColors.red,      // 折線顏色
  88.                                                     backgroundColor: window.chartColors.red  // legend 色塊顏色
  89.                                                    }
  90.                                                   ],
  91.                                         labels: aExname
  92.                                       },
  93.                                 options: {
  94.                                             animation: {
  95.                                                             duration: 0,  // 不以動畫方式畫線
  96.                                                        },
  97.                                             title: {    // 圖表標題
  98.                                                         display: true,
  99.                                                         text: "各考試單日統計",
  100.                                                         fontSize: 18
  101.                                                    },
  102.                                             legend:{    // 各色直條圖所代表的群體
  103.                                                         position: 'top'    // 置於圖表上方, 另可置於 bottom, left, right
  104.                                                    },
  105.                                             scales: {
  106.                                                         yAxes: [{    // Y 軸的樣式
  107.                                                                 type: 'linear',
  108.                                                                 position: 'left',
  109.                                                                 ticks: {    // 加上千位符
  110.             userCallback: function(value, index, values)
  111.            {
  112.                return value.toLocaleString();
  113.            }
  114.          }
  115.                                                                }]
  116.                                                     },
  117.                                             tooltips: { // 直條內的提示數字加上 千位符
  118.                                                         callbacks: {
  119.                                                                         // this callback is used to create the tooltip label
  120.                                                                         label: function(tooltipItem, data)
  121.                                                                                 {
  122.                                                                                     var dataLabel = data.labels[tooltipItem.index];
  123.                                                                                     var value = ': $' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
  124.  
  125.                                                                                     if (Chart.helpers.isArray(dataLabel))
  126.                                                                                         {
  127.                                                                                             dataLabel = dataLabel.slice();
  128.                                                                                             dataLabel[0] += value;
  129.                                                                                         }
  130.                                                                                     else
  131.                                                                                         {
  132.                                                                                             dataLabel += value;
  133.                                                                                         }
  134.                                                                                     return dataLabel;
  135.                                                                                 }
  136.                                                                     }
  137.                                                     },
  138.                                             onClick: function (event, arr)
  139.                                                     {
  140.                                                         // 可以指定點擊某個直條時，跳轉至指定的網頁
  141.                                                         switch(arr[0]._view['label'])
  142.                                                         {
  143.                                                             case '條件1': window.location.href = "下個網頁";
  144.                                                                             break;
  145.                                                             case '條件2': window.location.href = "下個網頁";
  146.                                                                             break;
  147.                                                             ...
  148.                                                             ...
  149.                                                         }
  150.                                                     }
  151.                                         }
  152.                                       });
  153.  
  154.  
  155. /////////////////
  156. var ctx2 = $("#chartTotal");
  157. var myChart2 = new Chart(ctx2,
  158.                             {
  159.                                 type: 'bar',
  160.                                 data: {
  161.                                         datasets: [{
  162.                                                     data: aExamcnt,
  163.                                                     label: "總練習數",
  164.                                                     borderColor: window.chartColors.green,
  165.                                                     backgroundColor: window.chartColors.yellow
  166.                                                    },
  167.                                                    {
  168.                                                     data: aDlcnt,
  169.                                                     label: "總下載數",
  170.                                                     borderColor: window.chartColors.blue,
  171.                                                     backgroundColor: window.chartColors.blue
  172.                                                    }
  173.                                                   ],
  174.                                         labels: aExname
  175.                                       },
  176.                                 options: {
  177.                                             animation: {
  178.                                                             duration: 0,  // 不以動畫方式畫線
  179.                                                        },
  180.                                             title: {
  181.                                                         display: true,
  182.                                                         text: "各考試總計",
  183.                                                         fontSize: 18
  184.                                                    },
  185.                                             legend:{
  186.                                                         position: 'top'
  187.                                                    },
  188.                                             scales: {
  189.                                                         yAxes: [{
  190.                                                                 type: 'linear',
  191.                                                                 position: 'left',
  192.                                                                 ticks: {    // 加上千位符
  193.              userCallback: function(value, index, values)
  194.            {
  195.                return value.toLocaleString();
  196.            }
  197.          }
  198.                                                                }]
  199.                                                     },
  200.                                             tooltips: { // 直條內的提示數字加上 千位符
  201.                                                         callbacks: {
  202.                                                                         // this callback is used to create the tooltip label
  203.                                                                         label: function(tooltipItem, data)
  204.                                                                                 {
  205.                                                                                     var dataLabel = data.labels[tooltipItem.index];
  206.                                                                                     var value = ': $' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
  207.  
  208.                                                                                     if (Chart.helpers.isArray(dataLabel))
  209.                                                                                         {
  210.                                                                                             dataLabel = dataLabel.slice();
  211.                                                                                             dataLabel[0] += value;
  212.                                                                                         }
  213.                                                                                     else
  214.                                                                                         {
  215.                                                                                             dataLabel += value;
  216.                                                                                         }
  217.                                                                                     return dataLabel;
  218.                                                                                 }
  219.                                                                     }
  220.                                                     },
  221.                                             onClick: function (event, arr)
  222.                                                     {
  223.                                                         // 可以指定點擊某個直條時，跳轉至指定的網頁
  224.                                                         switch(arr[0]._view['label'])
  225.                                                         {
  226.                                                             case '條件1': window.location.href = "下個網頁";
  227.                                                                             break;
  228.                                                             case '條件2': window.location.href = "下個網頁";
  229.                                                                             break;
  230.                                                             ...
  231.                                                             ...
  232.                                                         }
  233.                                                     }
  234.                                         }
  235.                         });
  236. </script>
  237.  
  238. ...
  239. ...
  240. </body>
  241. </html>
  242.  


圖表成果如下：
* 因圖表寬度較小，因此 chartjs 自動隱藏某些考試名稱，以下圖為例，只顯示單數欄的考試名稱
* 滑鼠至直條內時會顯示相應的數值
* 不知道是不是沒摸索到顏色的配置方法，Chartjs 不會自動幫您配顏色，所以您必須要自己先建立一個顏色陣列，要用時，再到陣列取顏色值；或是自己以亂數產生顏色值，只是以亂數產生，有時會碰到相臨 2 個顏色太相近的窘境。



還有另一套圖表套件 ---- ZingChart，老人家自己覺得蠻好用又功能強大，但下載免費版使用時，圖表會強制顯示該公司的 LOGO 打廣告。

若不在意該公司的 LOGO 老人家倒是蠻推 ZingChart 的，因為好上手，學習曲線低；但如果不想顯示 LOGO......就付費吧(老人家的長官就不希望看到 LOGO，所以後來採用 Chartjs)。


最新發現! Apache 基金會的 Apache ECharts，開放源碼，而且免費，也不難學習，更推!!

 


相關筆記 ----

【WEB程式】以 Apache ECharts 繪製圖表

Labels: , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)