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>
相关推荐
Html5——Canvas实例(制作太阳地球月球三球联动动画)
主要是利用HTML5 Canvas实现饼图绘制,绘制弧度的API主要是使用 context.arc与lineto两个API。 实现的功能有: 1. 支持标签Legend显示或者隐藏 2. 首次载入动画效果 3. 鼠标tooltip效果 4. 自定义饼图大小与...
html5实现一个倒计时种,使用canvas绘图试下。
HTML5,canvas制作游戏2048
HTML5实验室——Canvas世界(源码)easel.js jscex.jscexRequire.min.js JSLINQ.js processing.js Vector2.js Vector3.js
html5 canvas自定义绘制多边图形代码 html5 canvas自定义绘制多边图形代码
一个经典的游戏,左右箭头可以控制垫子的移动
修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
博客《自定义控件三部曲之绘图篇(十三)——Canvas与图层(一)》对应源码,博客地址:http://blog.csdn.net/harvic880925/article/details/51317746
Hencoder 练习1 canvas如何绘制饼图....................
ASP实例开发源码——canvas-Flash网站管理系统 v1.0.zip
jquery html5 图表用canvas绘制一个动画圆形饼图
canvas自定义编辑器
html5 canvas饼图统计图表效果,配合jquery实现的,鼠标悬停于图上时会动态突出显示的饼形图。圆饼图和右侧的列表数据是对应的,用鼠标点击右侧的选项,左侧饼形图的对应部分会向外突出显示,这样便于清楚的看出所...
利用canvas自定义绘制圆盘,可用于自定义钟表,体重测量圆盘等多方面用途。
里面有对canvas自定义画图的案例和详情介绍,有注释
NULL 博文链接:https://showmo.iteye.com/blog/1292615
博客地址:http://www.cnblogs.com/ityizhainan/p/6306748.html
canvas扇形图饼图
射击类游戏,操作方法:方向键左右移动,空格子弹,"B"释放power(power槽满时) 游戏中玩家在打到一定分数后会升级获得能力提升,同时场上也会出现相应级别的敌人; 游戏没有设置成功条件,但是设置了死亡条件,被...