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:19
  • 3463

自定义控件实现——环形饼图

1 需求: 1) 根据不同份额占用等比例的份额,用不同颜色表示 2) 饼图要求:环形;有阴影效果;不同份额颜色不同;从外到内颜色不同 3) 加载数据有动画效果 2 原理...
  • baopengjian
  • baopengjian
  • 2017-12-25 15:44:16
  • 175

Android Canvas练习(2)自已绘饼图(Pie Chart)

上文弄了个绘制报表的,有了报表,当然想一并也绘个饼图,柱形图之类的玩玩,看看了API,觉得应当很简单,饼图实现了下, 实现代码确实也很简单,Android的这些函数封装的确实好用。          ...
  • xcltapestry
  • xcltapestry
  • 2014-04-07 17:51:14
  • 9964

canvas+js绘制饼状统计图

html> html> head lang="en"> meta charset="UTF-8"> title>title> head> body> canvas id="canvas...
  • qq_18972075
  • qq_18972075
  • 2015-12-23 20:55:15
  • 2637

qmlcanvas,类Html5 canvas的组件

http://jamiesun.iteye.com/blog/846748 qml的画板组件,实验室产品,好事者可以git clone git://gitorious.org/qt-labs/qm...
  • chenyijun
  • chenyijun
  • 2014-05-07 15:04:44
  • 946

html5 canvas自定义画板

html> head> meta charset="utf-8" /> head> body> 定义画板br /> canvas id="myCanvas" width="1200" heigh...
  • jbgtwang
  • jbgtwang
  • 2015-07-20 09:03:23
  • 3344

简单canvas制作饼状图

canvas
  • zhrookie
  • zhrookie
  • 2017-01-10 10:06:03
  • 807

canvas动态绘饼图

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

Android自定义带动画的饼图PieChart

Android中自定义带动画的饼图PieChart
  • qq_23179075
  • qq_23179075
  • 2017-03-13 20:17:36
  • 1763

qml中使用Canvas绘制饼状图

  • 2017年08月09日 21:16
  • 2KB
  • 下载
收藏助手
不良信息举报
您举报文章:HTML5——canvas自定义饼图
举报原因:
原因补充:

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