一款基於html5的統計圖片插件,它能夠簡單快捷的製做出多種形狀的很是漂亮且直觀的統計圖,固然,這麼實用的工具必須得支持主流的瀏覽器,後面會說到如何讓低版的瀏覽器也支持。在這裏還有一點說明,jQ酷只作與jquery相關的插件或文章,但這個讓我破例了,由於它太強大了,雖與jquery沒有半毛錢的關係,但仍是要拿出來和你們分享下,下面咱們來開始使用它。javascript
引入Chart.jshtml
<script src="Chart.js"></script
創建HTMLhtml5
<canvas id="myChart" width="400" height="400"></canvas>
寫入jsjava
var ctx = document.getElementById("myChart").getContext("2d"); var myNewChart = new Chart(ctx).PolarArea(data);
取得html中的myCchar元素,用2d的方式寫入數據,並以極狀圖展示。固然這裏也能夠用jquery插件來寫入node
//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是可選的配置參數。下面咱們來看下例子中的圖表寫法。jquery
<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部分爲兩大部分,第一部分爲每個圖形定義顏色,數據,第二部分調用插件,實例化對象,描出圖形。代碼做了簡要註釋,請細看。更具體的參數選項請查看官方幫助文檔。canvas
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,完成以上工做,漂亮的統計圖形就出現了。瀏覽器
能夠用如下方式來調用,避免高版本的瀏覽器也加載了。dom
<!--[if lte IE 8]> <script src="excanvas.js"></script> <![endif]-->
轉載請註明:jQ酷 » 基於html5的很是好用的統計圖表插件chart.js好了,完成這個就能夠完美的在全部瀏覽器上使用了。jquery插件