HTML5——canvas自定義餅圖
實現(xiàn)條件:IE9+ 、Firefox 、Chrome 、IOS5+ 、android2.3+
配置前引入文件:https://files.cnblogs.com/ccto/roundChart2.js(源文件為250行)
配置說明:
1 var roundChart = new RoundChart({ 2 boxId: "divId", //容器ID (必選) 3 data: { //數(shù)據(jù) (必選) 長度統(tǒng)一 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 });
浙公網安備 33010602011771號