svg绘制一个简单地饼图

最新推荐文章于 2025-01-16 11:53:13 发布

转载最新推荐文章于 2025-01-16 11:53:13 发布 · 262 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cjs1992/p/8399422.html

一个简单地svg绘制饼图的demo，代码如下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>chart</title>
        <style>
            #container {
                width: 400px;
                height: 400px;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
        <script>
            var data = [
                {name: '苹果', value: 5},
                {name: '香蕉', value: 10},
                {name: '橙子', value: 8},
                {name: '梨子', value: 16}
            ];
            myChartPie(
                document.getElementById('container'),
                data
            );
            function myChartPie(ele,data) {
                var rectx = 100;  //  x 半径
                var recty = 100;  //  y 半径
                var pointx = 200; // 圆心坐标x
                var pointy = 200; //圆心坐标y
                var pathhtml = '';
                var html = '<svg xlms="http://www.w3c.org/2000/svg" version="1.1" width="800" height="800">'                
                var htmlclose = "</svg>";
                var count = 0;
                for (var j = 0;j < data.length;j++) {
                    count  = count + (data[j].value-0);
                }
                var cx = 200;  //起始点x
                var cy = 100;  //起始点y
                var cxto = 0;  //结束点x
                var cyto = 0;  // 结束点y
                var countsqrt = 0;
                for (var i = 0;i < data.length;i++) {
                    // 角度
                    countsqrt += data[i].value;
                    var sqrt = countsqrt / count;
                    if (data[i].value / count > 1 * 0.5) {
                        cxto = pointx + rectx * Math.sin(Math.PI * 2 * sqrt);
                        cyto = pointy - recty * Math.cos(Math.PI * 2 * sqrt);
                        pathhtml += '<path fill="' + MathColor(0,255) +  '" stroke="' + '#000' + '"d="' + 
                    
                    'M ' + cx + ' ' + cy + ' ' +
                    'A ' + rectx + ' ' + recty + ' ' + '0 1 1 ' + cxto + '  ' + cyto + ' ' + 
                    'L ' + pointx + ' ' + pointy + '  Z'
                    + '"></path>';
                    }else {
                        cxto = pointx + rectx * Math.sin(Math.PI * 2 * sqrt);
                        cyto = pointy - recty * Math.cos(Math.PI * 2 * sqrt);
                        pathhtml += '<path fill="' + MathColor(0,255) +  '" stroke="' + '#000' + '"d="' + 
                    
                    'M ' + cx + ' ' + cy + ' ' +
                    'A ' + rectx + ' ' + recty + ' ' + '0 0 1 ' + cxto + '  ' + cyto + ' ' + 
                    'L ' + pointx + ' ' + pointy + '  Z'
                    + '"></path>';
                    }                                    
                    cx = cxto;
                    cy = cyto;
                }
                ele.innerHTML =  html + pathhtml + htmlclose;
            }
            function MathColor (x,y) {
                var r = Math.floor(Math.random() * (y-x + 1)) + x;
                var g = Math.floor(Math.random() * (y-x + 1)) + x;
                var b = Math.floor(Math.random() * (y-x + 1)) + x;
                return 'rgb(' + r + ',' + g + ',' + b + ')';
            }
        </script>
    </body>

</html>