JS組件系列——開源免費圖表組件：Chart.js
前言：最近被開源免費得有點上火了，各種組件首先想到的就是是開源否、是否免費、是否和bootstrap風格一致。想著以后做報表肯定要用到圖表組件的，于是在Bootstrap中文網上面找到了Chart.js，總的來說，這個組件不能說最好，但是對于一般不太復雜的報表是夠用了。今天就來看看它如何使用吧。
一、組件比較以及選用
其實說起報表組件，網上一搜一大把，各種讓人眼花繚亂的組件，但貌似比較出名一點的都是收費的。綜合來看：
JsChart組件功能強大，能適應各種復雜的需求和業務；Chart.js免費。
FunsionChart界面優美，效果炫，用戶體驗好；Chart.js免費。
HighChart使用方便，調用簡單，開發效率高；Chart.js免費。
如果你說：咱們公司不缺錢，當然是哪個最好用哪個嘍。那博主只能說：有錢，任性。至少博主所在的公司是把免費放在選用組件的第一原則的。
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、環狀圖
5、極地區域圖
6、雷達圖
三、代碼示例
關于chart.js的使用代碼其實不用多說，文檔里面很容易看懂。這里就簡單展示一個：
chart.js的原理是使用html5的canvas標簽，所以首先它需要一個canvas的標簽放在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); });
如果是做業務需求，一般來說，data的數據是從后臺構造成指定格式的json對象然后傳遞到前端。前端調用的時候只需要簡單的兩句：
var ctx = $("#myChart").get(0).getContext("2d"); new Chart(ctx).Bar(data);
如果是需要修改它的默認顯示參數，則可以指定options
var options = { //Boolean - If we show the scale above the chart data //是否顯示柱狀圖上面的數據 scaleOverlay: true, //Boolean - If we want to override with a hard coded scale scaleOverride: false, //** Required if scaleOverride is true ** //Number - The number of steps in a hard coded scale scaleSteps: null, //Number - The value jump in the hard coded scale scaleStepWidth: 50, //Number - The scale starting value scaleStartValue: null, //String - Colour of the scale line //x/y軸坐標線的顏色 scaleLineColor: "rgba(0,0,0,.1)", //Number - Pixel width of the scale line //坐標線的寬度 scaleLineWidth: null, //Boolean - Whether to show labels on the scale //是否顯示label值 scaleShowLabels: true, //Interpolated JS string - can access value scaleLabel: "<%=value%>", //String - Scale label font declaration for the scale label //字體Family scaleFontFamily: "'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 chart scaleShowGridLines: false, //String - Colour of the grid lines //網格線顏色 scaleGridLineColor: "rgba(0,0,0,.05)", //Number - Width of the grid lines scaleGridLineWidth: 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值內的柱狀塊之間的間距 barDatasetSpacing: 1, //Boolean - Whether to animate the chart animation: true, //Number - Number of animation steps animationSteps: 60, //String - Animation easing effect animationEasing: "easeOutQuart", //Function - Fires when the animation is complete onAnimationComplete: 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); } }
然后在調用的時候稍作修改：
$(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是自帶的這個功能。等待發布！
四、總結
至此，柱狀圖的使用就說完了。其他圖表的用法和這個相似度達到90%，博主就不一一介紹了，待會直接上源碼?？偟膩碚f，這個組件開源、免費，然后它非常輕量級，不依賴任何的js組件（如果上面的代碼中不用jQuery，可以直接用DOM的方法去?。麄€js壓縮后僅僅4.5K大小。然而由于它的原理是基于html5的，所以對瀏覽器有一定的要求，并且它對IE7、IE8有降級處理方案，詳見Chart.js中文文檔。附上源碼，有需要看看。
浙公網安備 33010602011771號