前端如何根据传来的数据绘制饼图？

如何根据传来的数据绘制成如下的饼图呢？
我很想知道不通过插件如何实现，没有一点思路？

这是一个很常见的需求，应该有相应的开源类库可以使用，但是具体使用哪一种，要根据您选择的js框架来决定。

思路：获得数据，清空canvas区域，然后重绘，循环反复，over

echart、highchart。这两个js库比较好滴。文档比较全。

多个不同颜色的半圆叠加、旋转

echarts不错，样例都有代码http://echarts.baidu.com/demo.html#pie-simple

D3.js不能用吗？

第三方类图highchart.js之类的，或者直接通过canvas绘制，绘制难点在于所占比例即角度

百度echarts 上手时间5分钟······

果断用第三方图表库啊，自己写就啃爹了

一般都是用 canvas 画的吧，也可以用 svg

造轮子就省了，楼上都说过了。
自己用过一些画图的，
jfreechart（Java的，不过可以在web显示）基于map和area标签
echarts 百度的基于svg和canvas标签

如果非要研究的话可以看看这些HTML标签，
canvas是有一套统一的自己的js操作API的方法的。建议看这个，其它的标签不建议了解过多，除非你就是做这个的。

可以用canvas

highcharts.js

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/highcharts/4.2.5/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#pieContainer').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {text: ''},//这里是标题
    tooltip: {
        //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'    //饼上显示文字：第1种
        pointFormat: '{series.name}: <b>{point.percentage}%</b>',        //饼上显示文字：第2种
        //formatter: function() {
            //    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';    //饼上显示文字：第3种
            //}
    },
    credits: {    
        enabled:false    //去掉水印
        //text: 'e.com',
        //href: 'http://www.e.com'
    },
    plotOptions: {        //饼外面拉出的黑线和文字
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,        //设为false，不显示:饼外面拉出的黑线和文字
              color: '#000000',
              connectorColor: '#000000',
              format: '<b>{point.name}</b>: {point.percentage} %'
              //format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
            type: 'pie',
            name: 'Browser share',
            //colors: ['#1ccb6a','#1ccb6a','#1ccb6a','#f7ef1e','#f7ef1e','#f7ef1e','#f7ef1e'],//指定颜色
            data: [
                ['布艺装饰',10],
                ['家电',20],
                ['家具',27],

                ['设计费',5],
                ['管理费',4],
                ['人工费',10],
                ['材料费',24],

            ]
        }]
    });
});
</script>
<div id="pieContainer" style="width:600px;height:400px;"></div>

阿里的G2感觉不错，只要传个json 就Ok。g2.alipay.com

這個輪子不好做，推薦使用別人的輪子，百度的echarts庫就可以實現了
Echarts

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <canvas id="canvas" width=400 height=300></canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var cw = canvas.width;
    var ch = canvas.height;

    ctx.lineWidth = 2;
    ctx.font = '12px verdana';

    var PI2 = Math.PI * 2;
    var myColor = ["Green", "Red", "Blue"];
    var pieData = [{
        name: '空调',
        value: '30'
    }, {
        name: '彩电',
        value: '60'
    }, {
        name: 'PS4',
        value: '10'
    }]
    var myData = [30, 60, 10];
    var cx = 150;
    var cy = 150;
    var radius = 100;

    pieChart(pieData, myColor);

    function pieChart(data, colors) {
        var total = 0;
        for (var i = 0; i < data.length; i++) {
            total += +data[i].value;
        }
        var sweeps = []
        for (var i = 0; i < data.length; i++) {
            sweeps.push(data[i].value / total * PI2);
        }

        var accumAngle = 0;
        for (var i = 0; i < sweeps.length; i++) {
            drawWedge(accumAngle, accumAngle + sweeps[i], colors[i], data[i], total);
            accumAngle += sweeps[i];
        }


    }

    function drawWedge(startAngle, endAngle, fill, label, total) {

        // draw the wedge
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, radius, startAngle, endAngle, false);
        ctx.closePath();
        ctx.fillStyle = fill;
        ctx.strokeStyle = 'white';
        ctx.fill();
        ctx.stroke();

        // draw the label
        var midAngle = startAngle + (endAngle - startAngle) / 2;
        var labelRadius = radius * .75;
        var x = cx + (labelRadius) * Math.cos(midAngle) - 10;
        var y = cy + (labelRadius) * Math.sin(midAngle);
        ctx.fillStyle = 'white';
        ctx.fillText(label.name, x, y);
        ctx.fillText(label.value % total + '%', x, y + 20);


    }
    </script>
</body>

</html>

canvas+1。

http://www.108js.com/article/article7/70046.html?id=220
http://blog.csdn.net/jia20003/article/details/10165009
http://www.tuicool.com/articles/rqYjUn

【热门文章】