一个简单的例子。
1.html代码
<div id="pie" style="width: 250px;float:left"> <h3>饼图</h3> <canvas style="float:left" ></canvas> <div class="legend"></div> </div>
说明：canvas标记用来作图。div.legend用来放置图例。整体区域使用#pie标记。
2.js代码
<script> $.ajax({ url:"_get_json.php?a=getTeaNumbyDep_json", dataType:"json", success:function(data){ //console.info(data); pie("#pie",data,"#legend"); bar("#bar",data); } });</script>说明：这部分代码是和上面的html代码写在一起的。jquery的ajax方法访问了一个_get_json.php页面，并以json的格式返回数据。pie是一个单独的封装的js方法，bar也是。
3.用于获取数据的php代码
$sql ="select dep_name as label,count(tea_code) as value from sims_teacher,sims_department where sims_teacher.dep_code=sims_department.dep_code group by sims_teacher.dep_code";$rs = $this->db->getAll($sql);echo json_encode($rs);
说明：这里编写了一条sql语句，并执行，把结果以json格式返回。为了方便我使用数据，为选出的两个字段分别使用了label,value这两个别名，主要的原因是chart.js中绘制饼图时需要的数据格式就如此（这里有详细说明）。而绘制柱状图时，又需要另一种数据格式（晕死，又要重新写）。
4.用来画图的两个js函数pie,bar
var colors = ["#F38630","#E0E4CC","#69D2E7"];function pie(obj_id,pieData,obj_legent=null){ if(pieData.length==null || pieData.length == 0) return; for(var i=0;i<pieData.length;i++) { pieData[i].color=colors[i%colors.length]; pieData[i].fillColor=colors[i%colors.length]; } var t = obj_id +" canvas"; console.info(t) var ctx = $("#pie canvas")[0].getContext("2d"); myChart = new Chart(ctx).Pie(pieData, { responsive : true, scaleFontColor : "#00F", tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>人", legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%>：<%=segments[i].value%><%}%></li><%}%></ul>" }); if(obj_legent) { var legend = myChart.generateLegend(); $(obj_id +" div.legend").empty(); $(obj_id +" div.legend").append(legend); }}function bar(obj_id,Data,obj_legent=null){ if(Data.length==null || Data.length == 0) return; var barData={}; barData.labels=[]; barData.datasets=[]; var temData={}; temData.data=[]; temData.fillColor= "rgba(151,187,205,0.5)"; temData.strokeColor = "rgba(151,187,205,0.8)"; temData.highlightFill="rgba(151,187,205,0.75)", temData.highlightStroke= "rgba(151,187,205,1)"; for(var i=0;i<Data.length;i++) { barData.labels.push(Data[i].label); temData.data.push(Data[i].value); } barData.datasets.push(temData); //封装一个规定格式的barData。 console.info(barData); var t = obj_id +" canvas"; var ctx = $(t).get(0).getContext("2d"); myChart = new Chart(ctx).Bar(barData, { //重点在这里 responsive : true }); if(obj_legent) { var legend = myChart.generateLegend(); $(obj_id +" div.legend").empty(); $(obj_id +" div.legend").append(legend); }}说明：
（1）为了给饼图的各个区块设置不同的颜色，设置了colors数组。当然三个颜色肯定不够的。
（2）bar函数的前段，一直在封装固定格式的数据。
最后的效果如下：
原标题：chart.js 示例
关键词：JS
我知道了 