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

 

最后的效果如下：

转载于:https://www.cnblogs.com/gxbmy/p/4858124.html