关闭

HTML5——canvas自定义饼图

226人阅读 评论(0) 收藏 举报
分类:
 
 
实现条件: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>

0
0

猜你在找
深度学习基础与TensorFlow实践
【在线峰会】前端开发重点难点技术剖析与创新实践
【在线峰会】一天掌握物联网全栈开发之道
【在线峰会】如何高质高效的进行Android技术开发
机器学习40天精英计划
Python数据挖掘与分析速成班
微信小程序开发实战
JFinal极速开发企业实战
备战2017软考 系统集成项目管理工程师 学习套餐
Python大型网络爬虫项目开发实战(全套)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:10471次
    • 积分:316
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:9篇
    • 译文:0篇
    • 评论:0条
    文章存档