chart.js

一款基於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插件

相關文章
相關標籤/搜索