chart.js

一款基於html5的統計圖片插件，它能夠簡單快捷的製做出多種形狀的很是漂亮且直觀的統計圖，固然，這麼實用的工具必須得支持主流的瀏覽器，後面會說到如何讓低版的瀏覽器也支持。在這裏還有一點說明，jQ酷只作與jquery相關的插件或文章，但這個讓我破例了，由於它太強大了，雖與jquery沒有半毛錢的關係，但仍是要拿出來和你們分享下，下面咱們來開始使用它。

引入Chart.js

<script src="Chart.js"></script

創建HTML

<canvas id="myChart" width="400" height="400"></canvas>

寫入js

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

取得html中的myCchar元素，用2d的方式寫入數據，並以極狀圖展示。固然這裏也能夠用jquery插件來寫入

//Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);
new Chart(ctx).PolarArea(data,options);

html代碼創建了6個canvas標籤，這6個標籤就是準備給描入圖形的，其它的標籤只是佈局或說明做用。以上代碼就是基本的使用方法，其中data是必選的參數，options是可選的配置參數。下面咱們來看下例子中的圖表寫法。

<ul>
      <li>
        <canvas id="doughnut" ></canvas>
        <p>一、環狀圖</p>
      </li>
      <li>
        <canvas id="line" ></canvas>
        <p>二、折線圖</p>
      </li>
      <li>
        <canvas id="polarArea" ></canvas>
        <p>三、極狀圖</p>
      </li>
      <li>
        <canvas id="bar" ></canvas>
        <p>四、柱形圖</p>
      </li>
      <li>
        <canvas id="pie" ></canvas>
        <p>五、餅圖</p>
      </li>
      <li>
        <canvas id="radar" ></canvas>
        <p>六、雷達圖</p>
      </li>
</ul>    

　　

JS部分爲兩大部分，第一部分爲每個圖形定義顏色，數據，第二部分調用插件，實例化對象，描出圖形。代碼做了簡要註釋，請細看。更具體的參數選項請查看官方幫助文檔。

var doughnutData = [ //環狀圖
    {
        value: 30,   //數值，如黃瓜30個
        color:"#F7464A" //顏色
    },
    {
        value : 50, //數值，如青瓜50個，下面的以此類推
        color : "#46BFBD"
    },
    {
        value : 100,
        color : "#FDB45C"
    },
    {
        value : 40,
        color : "#949FB1"
    },
    {
        value : 120,
        color : "#4D5360"
    }
];
var lineChartData = { //折線圖
    labels : ["","","","","","",""],
    datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)", //背景顏色
        strokeColor : "rgba(220,220,220,1)", //線條顏色
        pointColor : "rgba(220,220,220,1)", //點的顏色
        pointStrokeColor : "#fff",  //點邊框的顏色
        data : [65,59,90,81,56,55,40] //數值
    },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : [28,48,40,19,96,27,100]
    }
    ]
             
};
var pieData = [ //餅狀圖
    {
    value: 30,
    color:"#F38630"
    },
    {
    value : 50,  //數值
    color : "#E0E4CC" //顏色
    },
    {
    value : 100,
    color : "#69D2E7"
    }
             
];
var barChartData = { //柱形圖
labels : ["January","February","March","April","May","June","July"], //x軸標籤
datasets : [
        {
        fillColor : "rgba(220,220,220,0.5)", //柱子填充色
        strokeColor : "rgba(220,220,220,1)", //柱子邊框色
        data : [65,59,90,81,56,55,40] //數據，Y軸
        },
        {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        data : [28,48,40,19,96,27,100]
        }
    ]
             
};
var chartData = [ //極狀圖
    {
    value : Math.random(), //隨機獲取數值
    color: "#D97041"  //填充顏色
    },
    {
    value : Math.random(),
    color: "#C7604C"
    },
    {
    value : Math.random(),
    color: "#21323D"
    },
    {
    value : Math.random(),
    color: "#9D9B7F"
    },
    {
    value : Math.random(),
    color: "#7D4F6D"
    },
    {
    value : Math.random(),
    color: "#584A5E"
    }
];
var radarChartData = { //雷達圖
    labels : ["","","","","","",""], //項標籤
    datasets : [
        {
        fillColor : "rgba(220,220,220,0.5)", //填充色
        strokeColor : "rgba(220,220,220,1)",  //邊框色
        pointColor : "rgba(220,220,220,1)",  //點顏色
        pointStrokeColor : "#fff", //點邊框顏色
        data : [65,59,90,81,56,55,40] //數值
        },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : [28,48,40,19,96,27,100]
    }
    ]
             
};
    //調用插件，把數值以2d的方式描到對應元素中
new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData);
new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData);
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);

　　

插件適用於因此有支持html5的主流瀏覽器，可是IE8如下版本的就須要藉助explorercanvas插件才能使用了。ok，完成以上工做，漂亮的統計圖形就出現了。

能夠用如下方式來調用，避免高版本的瀏覽器也加載了。

<!--[if lte IE 8]>
<script src="excanvas.js"></script>
<![endif]-->

　　

轉載請註明：jQ酷 » 基於html5的很是好用的統計圖表插件chart.js好了，完成這個就能夠完美的在全部瀏覽器上使用了。