HTML5——canvas自定义饼图

 

 

实现条件：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  });