一个简单的例子。

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

最后的效果如下:

aaarticlea/png;base64,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" alt="" />

chart.js 示例的更多相关文章

  1. JS组件系列——开源免费图表组件:Chart.js

    前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...

  2. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  3. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  4. chart.js图表库案例赏析,饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  5. 【译】用 Chart.js 做漂亮的响应式表单

    数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...

  6. Chart.js 动态图表的使用

    一.相关资料 1. 简介 Chart.js 是一个基于 HTML5 的简单的面向对象的图表库,支持包括 IE7/8 和所有现代浏览器.支持六种图标:曲线图(Linecharts).柱状图(Barcha ...

  7. [转] angular2+highcharts+chart.js

    这里是在ionic2下使用highchairs和chart.js的简单示例chartjs部分参考http://www.jianshu.com/p/bc18132da812 1.安装hightchart ...

  8. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  9. Chart.js中文文档-雷达图

    雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...

随机推荐

  1. Css3图片圆角,兼容所有浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Flask学习记录之Flask-Mail

    Flask-Mail可以连接到配置中的SMTP服务器,进行邮件发送,如果没有进行SMTP服务器的配置,将会默认连接到localhost上的 一.配置及初始化 (1)flask应用配置 #配置选项 MA ...

  3. Lintcode--010(最长上升子序列)

    给定一个整数序列,找到最长上升子序列(LIS),返回LIS的长度.LIS(longestIncreasingSubsequence) 说明: 最长上升子序列的定义: 最长上升子序列问题是在一个无序的给 ...

  4. WPF:如何实现单实例的应用程序(Single Instance)

    原文:WPF:如何实现单实例的应用程序(Single Instance) 好吧,这是我将WPF与Windows Forms进行比较的系列文章的第四篇,讨论一下如何实现单实例(single instan ...

  5. linux文件合并

    第一:两个文件的交集,并集前提条件:每个文件中不得有重复行1. 取出两个文件的并集(重复的行只保留一份)2. 取出两个文件的交集(只留下同时存在于两个文件中的文件)3. 删除交集,留下其他的行1. c ...

  6. VC6.0 编译 gdlib 库

    环境  WinXP, MSVC6.0 1 从  https://bitbucket.org/libgd/gd-libgd/downloads 下载最新版本 libgd 2 可以用 nmake 编译 w ...

  7. 转:ASP.Net MVC:校验、AJAX与过滤器

    原文地址:http://blog.jobbole.com/85005/ 一.校验 — 表单不是你想提想提就能提 1.1 DataAnnotations(数据注解) 位于 System.Componen ...

  8. [置顶] 顿悟JAVA,自己实现Object的Clone的约束关系(上)

    因protected 的理解,顿悟一些JAVA的原理,模拟了Object类的子类为什么在调用clone方法前实现Cloneable接口. 这里不解释 ,上代码先. 运行效果 文件结构 调用类 pack ...

  9. poj 3187 Backward Digit Sums(穷竭搜索dfs)

    Description FJ and his cows enjoy playing a mental game. They write down the numbers to N ( <= N ...

  10. js+css实现模态层效果

    在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...