分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

i042416發表於2018-09-11
JavaScript行程

提升程式設計師工作效率的工具/技巧推薦系列

這可能是史上最簡單易用的開源統計圖表繪製庫了。柱狀圖，餅狀圖，點狀圖等等您能想到的型別全部支援。

這個開源庫的官網： http://www.chartjs.org/

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

直接看如何只用40行程式碼就實現專業的統計圖表。程式碼如下：

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表 

<html><canvas id="myChart" width="300px" height="300px"></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script><script>var ctx = document.getElementById("myChart").getContext('2d');var myChart = new Chart(ctx, {type: 'line',data: {labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],datasets: [{label: '# of Votes',data: [12, 14, 3, 5, 2, 3],backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'],borderWidth: 1}]
},options: {responsive: false,scales: {yAxes: [{ticks: {beginAtZero:true}
}]
}
}
});</script></html>

效果如下：

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

簡單解釋下程式碼。

  • 第二行：<canvas id="myChart" width="300px" height="300px"></canvas> 這個canvas結點作為最後繪製出的圖表顯示的一個容器，也就是說，最後畫出來的統計圖表就顯示在這個canvas結點裡。大家可以根據需要定義圖示的寬（width）和高（height）。

  • 第三行：宣告瞭這個開源庫的CDN地址。

  • 第八行：宣告要顯示的統計圖的型別。同一套資料是可以用不同的統計圖型別顯示出來的，可選的有bar, bubble, doughnut, horizontalBar, line, pie, polarArea, radar, scatter這幾種。本文後半部分提供了每一種圖的效果。

  • 第十行：labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]。定義了統計圖表的一個維度。如果是線狀圖，柱狀圖這些型別，則labels定義的維度作為統計同的橫座標（也就是X座標）。

  • 第十三行：data: [12, 14, 3, 5, 2, 3] 定義了統計圖表的另一個維度。如果是線狀圖，柱狀圖這些型別，則labels定義的維度作為統計圖的縱座標（也就是Y座標）。如果是餅狀圖，data定義的這些值是描述每個維度佔整個餅（一個完整圓）的百分比。

  • 第二十六行：responsive: false，意思是使用第二行canvas指定的寬和高來繪製統計圖表。如果response置為true，意思是響應式佈局，會以全屏的方式顯示圖表。

這40行程式碼就講解完了，對於應用程式開發人員來說，無需去研究裡面的繪圖細節，甚至連使用者把滑鼠放到圖示上自動彈出tooltip這些細節都自動由這個庫實現了，使用起來非常方便。

下面是把第八行程式碼圖示的型別屬性type傳入各種支援的型別後的渲染結果，方便大家查閱：

type: line - 線狀圖

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

doughnut - 圈圖

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

horizontalBar - 水平柱圖

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

pie - 餅狀圖

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

radar - 雷達圖

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

polarArea

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:


分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表

分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2213996/，如需轉載，請註明出處，否則將追究法律責任。

相關文章