HTML5——canvas自定义饼图

转载 2013年06月24日 23:19:41
 
 
实现条件:IE9+ 、Firefox 、Chrome 、IOS5+ 、android2.3+
 
配置前引入文件: http://files.cnblogs.com/ccto/roundChart2.js(源文件为250行)
 
配置说明:
 
 1  var roundChart = new RoundChart({
 2     boxId: "divId",     //容器ID   (必选)
 3     data: {             //数据     (必选)  长度统一 
 4       items: ["超级大单", "大单", "中单", "小单", "超级大单1", "大单1", "中单1", "小单1"],
 5       rates: ["15%", "10%", "10%", "10%", "15%", "10%", "25%", "5%"],
 6       showData: ["100W", "200W", "1100W", "20W", "10W", "110W", "21W", "10W"],
 7       color: ['#C13B37','#121B3A','#979797','#891E24','#07645C','#218441','#718A39','#AC892F','rgba(100%,30%,27%,0.5)']
 8     },
 9     canvasId: "",        //画板ID         (可选)  默认为容器ID + 'Canvas'
10     radius: "100",       //饼图半径       (可选)  默认为容器最小宽(或者)高的一半
11     centerX: '',         //饼图中心X      (可选)  默认为容器宽的1/2处,单位为px 或 %
12     centerY: '',         //饼图中心Y      (可选)  默认为容器高的1/2处,单位为px 或 %
13     isAnimate: true,     //是否动画过场   (可选)  默认为 false
14     isOpen: true,        //是否点击伸展   (可选)  默认为 false
15     newsCanvasId: "",    //提示框画板ID   (可选)  默认为容器ID + 'NewsCanvas'
16     newsCanvasStyle: ""  //提示框画板样式 (可选)  格式为{style1:value1,style2:value2},默认样式
17  });

 

<script type="text/javascript" src="http://files.cnblogs.com/ccto/roundChart2.js"></script><script type="text/javascript">// <![CDATA[ var roundChart = new RoundChart({ boxId: "divId", //容器ID (必选) data: { //数据 (必选) 长度统一 items: ["超级大单", "大单", "中单", "小单", "超级大单1", "大单1", "中单1", "小单1"], rates: ["15%", "10%", "10%", "10%", "15%", "10%", "25%", "5%"], showData: ["100W", "200W", "1100W", "20W", "10W", "110W", "21W", "10W"], color: ['#C13B37', '#121B3A', '#979797', '#891E24', '#07645C', '#218441', '#718A39', '#AC892F', 'rgba(100%,30%,27%,0.5)'] }, canvasId: "", //画板ID (可选) 默认为容器ID + 'Canvas' radius: "100", //饼图半径 (可选) 默认为容器最小宽(或者)高的一半 centerX: '', //饼图中心X (可选) 默认为容器宽的1/2处,单位为px 或 % centerY: '', //饼图中心Y (可选) 默认为容器高的1/2处,单位为px 或 % isAnimate: true, //是否动画过场 (可选) 默认为 false isOpen: true, //是否点击伸展 (可选) 默认为 false newsCanvasId: "", //提示框画板ID (可选) 默认为容器ID + 'NewsCanvas' newsCanvasStyle: "" //提示框画板样式 (可选) 格式为{style1:value1,style2:value2},默认样式 }); // ]]></script>

利用canvas绘制饼状图一种方法

利用canvas绘制饼状图以及上面对应的占比数值,方法很多,下面分享其中一种方法。 效果 思路: 1)将每块饼的占比以整数形式储存在数组nums中,将每个饼的颜色以字符串形式储存在数...
  • weixin_36185028
  • weixin_36185028
  • 2016年12月21日 17:42
  • 2421

纯HTML5 Canvas实现的饼图

纯HTML5 Canvas实现的饼图 原网址:http://www.open-open.com/code/view/1427035387346 基本思路: 主要是利用HTML5 Ca...
  • LateChangce
  • LateChangce
  • 2016年07月12日 02:48
  • 1314

Html5饼图绘制(统计图)

Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图(统计图)的方法。先看一下饼图效果: 这个图是动态生成的,根据传入的比例...
  • zht666
  • zht666
  • 2013年02月20日 18:00
  • 25088

Canvas的饼图百分比标注位置计算技巧

如何在一张饼图(Pie Chart)上每个扇形的中心位置标记出百分比。先上张最终效果图:         代码如下      public class MyViewOne ...
  • luo446718254
  • luo446718254
  • 2015年03月27日 09:34
  • 1678

微信小程序开发之画布canvas 饼状图

http://blog.csdn.net/qq_31383345/article/details/52944685           源码 微信小程序开发的时候会遇到统计功能的开放.今天想...
  • sinat_17775997
  • sinat_17775997
  • 2016年12月12日 17:34
  • 691

canvas动态绘饼图

html> html lang="en"> head> meta charset="UTF-8"> title>$Title$title> head> body> canvas id=...
  • ITzhongzi
  • ITzhongzi
  • 2017年03月08日 22:21
  • 174

html5制作饼图

本文章将通过一个简单易懂的实例来想大家阐述如何利用html5的canvas来绘制一个跟随json数据的饼状图,稍作移植,它就可以作为一个轻量级的js饼状图框架。下面让我们来看看示例运行效果。。。...
  • u010982006
  • u010982006
  • 2013年12月17日 21:18
  • 2275

Android自定义View初探(一)——饼图

接触Android已有两年有余,自从工作后都是为了工作而学习,没有时间去想、去做一些事情,久而久之,发现自己除了复制粘贴别人的代码和敲打一些简单的代码之外,无所长进。当然,这里开始尝试做一些事情的时候...
  • ykb19891230
  • ykb19891230
  • 2015年04月27日 17:46
  • 1765

Android Canvas练习(9)自已绘分割突出效果的饼图(Pie Chart)

这里画了个饼图的变种,具有分割突出效果的饼图(Pie Chart),就是个切蛋糕效果的饼图,画这种图,其技巧就在于圆心的偏移。 在圆心偏移,半径不变的基础上,效果就出来了。     上图:   ...
  • xcltapestry
  • xcltapestry
  • 2014年04月13日 10:24
  • 3579

微信小程序开发之画布canvas 饼状图

微信小程序开发的时候会遇到统计功能的开放.今天想做一个饼状图,群里有朋友造了轮子,我整理了一下,加了一些注释,分享出来. 先说说canvas: 1.微信里面canvas标签默认宽度300px、高度...
  • qq_31383345
  • qq_31383345
  • 2016年10月27日 12:26
  • 5429
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5——canvas自定义饼图
举报原因:
原因补充:

(最多只允许输入30个字)