标签：jquery 工具 帮助 tle rgb 方式 src 出图 hspa
一款基于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>1、环状图</p>
</li>
<li>
<canvas id="line" ></canvas>
<p>2、折线图</p>
</li>
<li>
<canvas id="polarArea" ></canvas>
<p>3、极状图</p>
</li>
<li>
<canvas id="bar" ></canvas>
<p>4、柱形图</p>
</li>
<li>
<canvas id="pie" ></canvas>
<p>5、饼图</p>
</li>
<li>
<canvas id="radar" ></canvas>
<p>6、雷达图</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好了，完成这个就可以完美的在所有浏览器上使用了。
标签：jquery 工具 帮助 tle rgb 方式 src 出图 hspa
原文地址：http://www.cnblogs.com/sunny0120/p/6800601.html
