JS画几何图形之四【饼图】

饼图是将一个圆分割为多个扇形。

样例: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<data.length;i++){ //计算data的合计
            total += data[i];
        }
        for(i = 0;i<data.length;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); //累计偏移角度
        }
    }
}
时间: 2024-10-08 06:47:31

JS画几何图形之四【饼图】的相关文章

JS画几何图形之三【正弦曲线】

数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html JS函数的声明: //画正弦曲线 //dot 原点 //amplitude 振幅 -- A //initialPhase 初相 -- φ //setover 偏距 -- k //palstance 角速度 -- ω //len 周期数 function drawSinusoid(dot, amplitude,initialPhase,palstance,setover,

JS画几何图形之一【直线】

JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 这里的点我们使用span标签表示 //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){ document.write("<span id='"+opts.point[0]+""+opts

JS画几何图形之五【过圆外一点作切线】

样例:http://www.zhaojz.com.cn/demo/draw9.html //画切线 //point 圆外的一点 //dot 圆心 //r 半径 function drawCircleTangent(point, dot, r){ //画辅助线-start var color = 'DarkRed'; //切线的颜色 var color2 = "#ccc"; //其它辅助线的颜色 drawLine(dot, [dot[0]+9*r,dot[1]], {color: col

JS画几何图形之六【过直线外一点作垂线】

样例:http://www.zhaojz.com.cn/demo/draw10.html //过直线外一点画垂线 function drawVerticalLine(point, line){ //画辅助线-start var color = 'DarkRed'; //垂线的颜色 var color2 = "#ccc"; //其它辅助线的颜色 drawPoint({ pw:2,ph:2,color:'DarkRed',point: line[0] }); drawPoint({ pw:

JS画几何图形之二【圆】

半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/draw6.html 一.圆 //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){ var pstart = [dot[0]+r, dot[1]]; //

无聊js画了个菱形

function repeat(str, count) { return count < 0 ? '' : (new Array(count)).join(str); } function diamond(sign, size) { var d, s = '' for (var i = 0; i < size*2; i++) { d = Math.abs(size-i-1); console.log(d+1, 2*(size-d)); s += repeat(' ', d+1) + repea

用JS画斐波那契螺旋线(黄金螺旋线)

偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FibonacciSequence</title> </head> <body> <

纯CSS画几何图形

<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS画几何图形</title> </head> <body> <!--多彩空心矩形--> <div style="width:100px; height:100px; border-width:20px; border-style:solid

JS 画饼图,折线图

网址: http://www.hcharts.cn/demo/index.php 效果图: 它的网址里面都很全的.简单实用扣代码即可 使用时注意数据格式即可 1 //获取mood_evalue的百分比 2 $total_mood_evalue = 0; 3 //初始化key的数组,统计key的百分比 4 $mood_key_arr = array(); 5 6 //1-5分别对应值1-5: 7 $mood_evalue_1 = $mood_evalue_2 = $mood_evalue_3 =