使用js画图之饼图_javascript技巧
程序员文章站
2022-05-21 20:31:19
...
使用js画图之饼图
//饼图
//dot 圆点
//r 半径
//data 数据(一维数组)
function drawPie(dot, r, data){
if(data && data.length > 0){
var accumulationAngleOfSlope = new Number(0); //累计偏移角度
var total = new Number(0);
var i = 0;
for(;i
total += data[i];
}
for(i = 0;i
var angle = new Number(360*data[i]/total).toFixed(3); //将data[i]/total转换为角度
//画一个扇形
drawSector(dot, r, new Number(angle), new Number(accumulationAngleOfSlope), true, Number(parseFloat(data[i]/total)*100).toFixed(3)+'%');
accumulationAngleOfSlope = accumulationAngleOfSlope+parseFloat(angle); //累计偏移角度
}
}
}
饼图是将一个圆分割为多个扇形。
样例:http://www.zhaojz.com.cn/demo/draw8.html
复制代码 代码如下:
//饼图
//dot 圆点
//r 半径
//data 数据(一维数组)
function drawPie(dot, r, data){
if(data && data.length > 0){
var accumulationAngleOfSlope = new Number(0); //累计偏移角度
var total = new Number(0);
var i = 0;
for(;i
}
for(i = 0;i
//画一个扇形
drawSector(dot, r, new Number(angle), new Number(accumulationAngleOfSlope), true, Number(parseFloat(data[i]/total)*100).toFixed(3)+'%');
accumulationAngleOfSlope = accumulationAngleOfSlope+parseFloat(angle); //累计偏移角度
}
}
}
上一篇: PHP用代码实现文件下载_PHP教程
推荐阅读
-
使用js画图之饼图_javascript技巧
-
使用js画图之饼图_javascript技巧
-
使用js画图之画切线_javascript技巧
-
js加载之使用DOM方法动态加载Javascript文件_javascript技巧
-
javascript学习总结之js使用技巧_javascript技巧
-
使用js画图之画切线_javascript技巧
-
使用js画图之正弦曲线_javascript技巧
-
使用js画图之圆、弧、扇形_javascript技巧
-
使用js画图之正弦曲线_javascript技巧
-
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题_javascript技巧