前言：最近被開源免費得有點上火了，各種組件首先想到的就是是開源否、是否免費、是否和bootstrap風(fēng)格一致。想著以后做報表肯定要用到圖表組件的，于是在Bootstrap中文網(wǎng)上面找到了Chart.js，總的來說，這個組件不能說最好，但是對于一般不太復(fù)雜的報表是夠用了。今天就來看看它如何使用吧。

一、組件比較以及選用

其實說起報表組件，網(wǎng)上一搜一大把，各種讓人眼花繚亂的組件，但貌似比較出名一點的都是收費的。綜合來看：

JsChart組件功能強(qiáng)大，能適應(yīng)各種復(fù)雜的需求和業(yè)務(wù)；Chart.js免費。

FunsionChart界面優(yōu)美，效果炫，用戶體驗好；Chart.js免費。

HighChart使用方便，調(diào)用簡單，開發(fā)效率高；Chart.js免費。

如果你說：咱們公司不缺錢，當(dāng)然是哪個最好用哪個嘍。那博主只能說：有錢，任性。至少博主所在的公司是把免費放在選用組件的第一原則的。

chart.js源碼：https://github.com/nnnick/Chart.js

chart.js 英文文檔：http://www.chartjs.org/docs/

chart.js 中文文檔：http://www.bootcss.com/p/chart.js/docs/

二、組件效果展示

上面扯了一大堆沒用的，先來一組效果圖看看吧。

1、柱狀圖

原始的柱狀圖

加上圖表說明和tooltip的柱狀圖

2、餅狀圖

3、曲線圖

4、環(huán)狀圖

5、極地區(qū)域圖

6、雷達(dá)圖

三、代碼示例

關(guān)于chart.js的使用代碼其實不用多說，文檔里面很容易看懂。這里就簡單展示一個：

chart.js的原理是使用html5的canvas標(biāo)簽，所以首先它需要一個canvas的標(biāo)簽放在cshtml頁面

<script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Content/Chart.js-master/Chart.js"></script> <canvas id="myChart" width="800" height="600"></canvas>

然后js里面（我們先以柱狀圖為例來說明）

var data = {labels: ["January", "February", "March", "April", "May", "June", "July"],datasets: [{fillColor: "#CCCCFF",strokeColor: "rgba(220,220,220,1)",label: "2010年",data: [65, 59, 90, 81, 56, 55, 40]},{fillColor: "#CCFFCC",strokeColor: "#CCFFCC",label:"2011年",data: [28, 48, 40, 19, 96, 27, 100]},{fillColor: "#FFFFCC",strokeColor: "#FFFFCC",label: "2012年",data: [13, 55, 40, 19, 23, 27, 64]},{fillColor: "#99FFFF",strokeColor: "#99FFFF",label: "2013年",data: [98, 11, 52, 19, 65, 20, 77]}] }$(function () {var ctx = $("#myChart").get(0).getContext("2d");var myNewChart = new Chart(ctx); myNewChart.Bar(data); });

如果是做業(yè)務(wù)需求，一般來說，data的數(shù)據(jù)是從后臺構(gòu)造成指定格式的json對象然后傳遞到前端。前端調(diào)用的時候只需要簡單的兩句：

var ctx = $("#myChart").get(0).getContext("2d"); new Chart(ctx).Bar(data);

如果是需要修改它的默認(rèn)顯示參數(shù)，則可以指定options

var options = {//Boolean - If we show the scale above the chart data //是否顯示柱狀圖上面的數(shù)據(jù)scaleOverlay: true,//Boolean - If we want to override with a hard coded scalescaleOverride: false,//** Required if scaleOverride is true **//Number - The number of steps in a hard coded scalescaleSteps: null,//Number - The value jump in the hard coded scalescaleStepWidth: 50,//Number - The scale starting valuescaleStartValue: null,//String - Colour of the scale line //x/y軸坐標(biāo)線的顏色scaleLineColor: "rgba(0,0,0,.1)",//Number - Pixel width of the scale line //坐標(biāo)線的寬度scaleLineWidth: null,//Boolean - Whether to show labels on the scale //是否顯示label值scaleShowLabels: true,//Interpolated JS string - can access valuescaleLabel: "<%=value%>",//String - Scale label font declaration for the scale label//字體FamilyscaleFontFamily: "'Arial'",//Number - Scale label font size in pixels//字體大小scaleFontSize: 12,//String - Scale label font weight style //字體樣式scaleFontStyle: "normal",//String - Scale label font colour //字體顏色scaleFontColor: "#666",///Boolean - Whether grid lines are shown across the chartscaleShowGridLines: false,//String - Colour of the grid lines//網(wǎng)格線顏色scaleGridLineColor: "rgba(0,0,0,.05)",//Number - Width of the grid linesscaleGridLineWidth: 1,//Boolean - If there is a stroke on each bar barShowStroke: true,//Number - Pixel width of the bar stroke barStrokeWidth: 2,//Number - Spacing between each of the X value sets// 柱狀塊與x值所形成的線（如：x=20這條線）之間的距離barValueSpacing: 5,//Number - Spacing between data sets within X values// 在同一x值內(nèi)的柱狀塊之間的間距barDatasetSpacing: 1,//Boolean - Whether to animate the chartanimation: true,//Number - Number of animation stepsanimationSteps: 60,//String - Animation easing effectanimationEasing: "easeOutQuart",//Function - Fires when the animation is completeonAnimationComplete: function () {var strHtml = "";for (var i = 0; i < this.datasets.length; i++) {strHtml += "<li><div><span style='background-color:" + this.datasets[i].fillColor + ";'></span><label>" + this.datasets[i].label + "</label></div><div style='clear:both;'></div></li>";}$("#ul_type").html(strHtml);} }

然后在調(diào)用的時候稍作修改：

$(function () {var ctx = $("#myChart").get(0).getContext("2d");var myNewChart = new Chart(ctx);myNewChart.Bar(data, options); });

?這里需要說明的一個地方是：由于使用的是chart.js 1.0.2版本，所以下圖右下角的那個說明的塊是博主自己在onAnimationComplete這個事件里面通過js加上去的

好像新版的chart.js是自帶的這個功能。等待發(fā)布！

四、總結(jié)

至此，柱狀圖的使用就說完了。其他圖表的用法和這個相似度達(dá)到90%，博主就不一一介紹了，待會直接上源碼。總的來說，這個組件開源、免費，然后它非常輕量級，不依賴任何的js組件（如果上面的代碼中不用jQuery，可以直接用DOM的方法去取），整個js壓縮后僅僅4.5K大小。然而由于它的原理是基于html5的，所以對瀏覽器有一定的要求，并且它對IE7、IE8有降級處理方案，詳見Chart.js中文文檔。附上源碼，有需要看看。

?

本文轉(zhuǎn)自懶得安分博客園博客，原文鏈接：http://www.cnblogs.com/landeanfen/p/5026485.html，如需轉(zhuǎn)載請自行聯(lián)系原作者

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的JS组件系列——开源免费图表组件：Chart.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。