Chartjs 是一套免費且開放原始碼(採用 MIT 授權) 的網頁圖表繪製套件,可繪製 6 種基本圖表:line(折線圖/線條圖)、bar(條狀圖,直/橫條)、radar(雷達圖)、doughnut & pie(圓餅圖/甜甜圈圖)、polar area(極座標圖餅圖/南丁格爾玫瑰圖/雞冠花圖/風花圖)、bubble(氣泡圖),
2 種衍伸圖表(不知道這兩種圖表的中文名稱):
scatter(散佈圖)、area
還可以上述 8 種圖表混合使用。
將 chartjs 上傳到您的網站內的指定目錄下,在本例為 /plugin/
PHP 網頁內容
- ...
- ...
- <head>
- <script src="/jquery/jquery-1.11.3.min.js"></script> <!-- jQuery 不是必需, 但我不熟純 javascript -->
- <script src="/plugin/chartjs/Chart.bundle.min.js"></script>
- <script src="/plugin/chartjs/Chart.min.js"></script>
- <script src="/plugin/chartjs/chartjs-plugin-zoom.min.js"></script>
- <script src="/plugin/chartjs/utils.js"></script>
- <script src="/plugin/chartjs/moment-with-locales.min.js"></script>
- </head>
- <!-- 設定圖表尺寸 -->
- <style>
- .chart
- {
- height:100; width:45%; margin: 20px;
- }
- </style>
- ...
- ...
- <body>
- <?php
- // 宣告存放數據的陣列
- $aExname = array(); // 考試名稱
- $aDlday = array(); // 單日下載
- $aDlcnt = array(); // 總下載數
- $aExamday = array(); // 單日練習
- $aExamcnt = array(); // 總練習數
- // 建立資料庫連線, 並取得資料
- $pdoStat = $pdo->prepare($sql);
- $pdoStat->execute();
- $rs = $pdoStat->fetchAll();
- if(count($rs)>0)
- {
- foreach($rs as $row)
- {
- // 將各欄位值存入陣列
- array_push($aExname, $row['exname']); // 考試名稱
- array_push($aDlday, $row['dlday']); // 單日下載
- array_push($aDlcnt, $row['dlcnt']); // 總下載數
- array_push($aExamday, $row['examday']); // 單日練習
- array_push($aExamcnt, $row['examcnt']); // 總練習數
- }
- // 將陣列自 PHP 轉出變為 javascript 陣列
- // str_pad() 沒什麼作用, 只是讓轉出的 HTML 原始碼易於閱讀而已
- echo str_pad(" ", 28)."<script language='javascript'>\n";
- echo str_pad(" ", 28).'var aExname = '.json_encode($aExname).";\n"; // 考試名稱
- echo str_pad(" ", 28).'var aDlday = '.json_encode($aDlday).";\n"; // 單日下載
- echo str_pad(" ", 28).'var aDlcnt = '.json_encode($aDlcnt).";\n"; // 總下載數
- echo str_pad(" ", 28).'var aExamday = '.json_encode($aExamday).";\n"; // 單日練習
- echo str_pad(" ", 28).'var aExamcnt = '.json_encode($aExamcnt).";\n"; // 總練習數
- echo str_pad(" ", 28)."</script>\n";
- }
- ?>
- // 左, 右 放置 2 個直條圖
- <div class="chart" style="float:left;">
- <!-- 各考試單日統計 -->
- <canvas id="chartDay" />
- </div>
- <div class="chart" style="float:right;">
- <!-- 各考試總計 -->
- <canvas id="chartTotal" />
- </div>
- <script language='javascript'>
- var ctx1 = $("#chartDay");
- var myChart1 = new Chart(ctx1,
- {
- type: 'bar', // 指定圖表為直條圖
- data: {
- datasets: [{
- data: aExamday,
- label: "單日練習",
- borderColor: window.chartColors.green, // 有這幾個基本顏色可選:red, orange, yellow, green, blue, purple, grey
- backgroundColor: window.chartColors.green
- },
- {
- data: aDlday,
- label: "單日下載",
- borderColor: window.chartColors.red, // 折線顏色
- backgroundColor: window.chartColors.red // legend 色塊顏色
- }
- ],
- labels: aExname
- },
- options: {
- animation: {
- duration: 0, // 不以動畫方式畫線
- },
- title: { // 圖表標題
- display: true,
- text: "各考試單日統計",
- fontSize: 18
- },
- legend:{ // 各色直條圖所代表的群體
- position: 'top' // 置於圖表上方, 另可置於 bottom, left, right
- },
- scales: {
- yAxes: [{ // Y 軸的樣式
- type: 'linear',
- position: 'left',
- ticks: { // 加上千位符
- userCallback: function(value, index, values)
- {
- return value.toLocaleString();
- }
- }
- }]
- },
- tooltips: { // 直條內的提示數字加上 千位符
- callbacks: {
- // this callback is used to create the tooltip label
- label: function(tooltipItem, data)
- {
- var dataLabel = data.labels[tooltipItem.index];
- var value = ': $' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
- if (Chart.helpers.isArray(dataLabel))
- {
- dataLabel = dataLabel.slice();
- dataLabel[0] += value;
- }
- else
- {
- dataLabel += value;
- }
- return dataLabel;
- }
- }
- },
- onClick: function (event, arr)
- {
- // 可以指定點擊某個直條時,跳轉至指定的網頁
- switch(arr[0]._view['label'])
- {
- case '條件1': window.location.href = "下個網頁";
- break;
- case '條件2': window.location.href = "下個網頁";
- break;
- ...
- ...
- }
- }
- }
- });
- /////////////////
- var ctx2 = $("#chartTotal");
- var myChart2 = new Chart(ctx2,
- {
- type: 'bar',
- data: {
- datasets: [{
- data: aExamcnt,
- label: "總練習數",
- borderColor: window.chartColors.green,
- backgroundColor: window.chartColors.yellow
- },
- {
- data: aDlcnt,
- label: "總下載數",
- borderColor: window.chartColors.blue,
- backgroundColor: window.chartColors.blue
- }
- ],
- labels: aExname
- },
- options: {
- animation: {
- duration: 0, // 不以動畫方式畫線
- },
- title: {
- display: true,
- text: "各考試總計",
- fontSize: 18
- },
- legend:{
- position: 'top'
- },
- scales: {
- yAxes: [{
- type: 'linear',
- position: 'left',
- ticks: { // 加上千位符
- userCallback: function(value, index, values)
- {
- return value.toLocaleString();
- }
- }
- }]
- },
- tooltips: { // 直條內的提示數字加上 千位符
- callbacks: {
- // this callback is used to create the tooltip label
- label: function(tooltipItem, data)
- {
- var dataLabel = data.labels[tooltipItem.index];
- var value = ': $' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
- if (Chart.helpers.isArray(dataLabel))
- {
- dataLabel = dataLabel.slice();
- dataLabel[0] += value;
- }
- else
- {
- dataLabel += value;
- }
- return dataLabel;
- }
- }
- },
- onClick: function (event, arr)
- {
- // 可以指定點擊某個直條時,跳轉至指定的網頁
- switch(arr[0]._view['label'])
- {
- case '條件1': window.location.href = "下個網頁";
- break;
- case '條件2': window.location.href = "下個網頁";
- break;
- ...
- ...
- }
- }
- }
- });
- </script>
- ...
- ...
- </body>
- </html>
圖表成果如下:
* 因圖表寬度較小,因此 chartjs 自動隱藏某些考試名稱,以下圖為例,只顯示單數欄的考試名稱
* 滑鼠至直條內時會顯示相應的數值
* 不知道是不是沒摸索到顏色的配置方法,Chartjs 不會自動幫您配顏色,所以您必須要自己先建立一個顏色陣列,要用時,再到陣列取顏色值;或是自己以亂數產生顏色值,只是以亂數產生,有時會碰到相臨 2 個顏色太相近的窘境。
還有另一套圖表套件 ---- ZingChart,老人家自己覺得蠻好用又功能強大,但下載免費版使用時,圖表會強制顯示該公司的 LOGO 打廣告。
若不在意該公司的 LOGO 老人家倒是蠻推 ZingChart 的,因為好上手,學習曲線低;但如果不想顯示 LOGO......就付費吧(老人家的長官就不希望看到 LOGO,所以後來採用 Chartjs)。
最新發現! Apache 基金會的 Apache ECharts,開放源碼,而且免費,也不難學習,更推!!
相關筆記 ----
沒有留言:
張貼留言