你的位置:首页 > Java教程

[Java教程]chart.js 示例


一个简单的例子。

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函数的前段,一直在封装固定格式的数据。

 

最后的效果如下: