JS組件系列——開源免費圖表組件：Chart.js

前言：最近被開源免費得有點上火了，各類組件首先想到的就是是開源否、是否免費、是否和bootstrap風格一致。想着之後作報表確定要用到圖表組件的，因而在Bootstrap中文網上面找到了Chart.js，總的來講，這個組件不能說最好，可是對於通常不太複雜的報表是夠用了。今天就來看看它如何使用吧。

1、組件比較以及選用

其實提及報表組件，網上一搜一大把，各類讓人眼花繚亂的組件，但貌似比較出名一點的都是收費的。綜合來看：

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/

2、組件效果展現

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

一、柱狀圖

原始的柱狀圖

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

二、餅狀圖

三、曲線圖

四、環狀圖

五、極地區域圖

六、雷達圖

3、代碼示例

關於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是自帶的這個功能。等待發布！

4、總結

至此，柱狀圖的使用就說完了。其餘圖表的用法和這個類似度達到90%，博主就不一一介紹了，待會直接上源碼。總的來講，這個組件開源、免費，而後它很是輕量級，不依賴任何的js組件（若是上面的代碼中不用jQuery，能夠直接用DOM的方法去取），整個js壓縮後僅僅4.5K大小。然而因爲它的原理是基於html5的，因此對瀏覽器有必定的要求，而且它對IE七、IE8有降級處理方案，詳見Chart.js中文文檔。附上源碼，有須要看看。