chart.js 示例

 <div id="pie"  style="width: 250px;float:left">     
    <h3>饼图</h3>
    <canvas style="float:left" ></canvas>
    <div class="legend"></div>
 </div>

<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>

$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);

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);
    }
}