By lisr

更新日期:

文章目錄
  1. 1. 效果如图
  • 追加数据
    1. 1. 效果如图
  • 删除数据
    1. 1. 效果如图
    2. 2. 效果如图
  • 修改labels中的某个值
    1. 1. 效果如图
  • 修改某个数据
    1. 1. 效果如图
  • 修改某个数据的填充色
    1. 1. 效果如图

    • 关于饼状图的绘制，追加 、更新、删除数据等操作的总结，
    其中追加数据、删除数据、更新数据的操作都是在绘制完的饼状图的基础上实现的

    html:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    	<html>
     	<head lang="en">
        	 <meta charset="UTF-8">
        	<script src="js/Chart.min.js"></script>
     		<title>pie chart</title>
     	</head>
     	<body> 		
    	 	<div class="pie-chart">
    	 		<h5 class="pie-title">XX饮料营业额情况一览表</h5>
    	 		<canvas id="pie" width=400 height=400></canvas>
    	 		<div id="legend"></div>
    	 	</div> 	
     	</body>
    	</html>

    css:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .pie-legend li span {
        width: 1em;
        height: 1em;
        display: inline-block;
        margin-right: 5px;
    }

    .pie-legend {
        list-style: none;
    }

    javascript:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69

     	// 饼状图数据
       var pieData = [
           {
               value: 300, color: '#57c7d4', label: '1月'
           },
           {
               value: 150, color: '#3aa99e', label: '2月'
           },
           {
               value: 100, color: '#f2a654', label: '3月'
           },
           {
               value: 140, color: '#f96868', label: '4月'
           },
           {
               value: 120, color: '#926dde', label: '5月'
           }
       ];
       // 饼状图选项设置
       var configs  = {
       	// 是否显示提示
           showTooltips:false,
           // 标签字体的颜色
           scaleFontColor: '#000',
       	// 块和块之间是否有间距
       	segmentShowStroke : true,
    	// 块和块之间间距的颜色
        segmentStrokeColor : "#fff",
    	// 块和块之间间距的宽度
        segmentStrokeWidth : 2,
    	// 是否有从0度到360度的动画
        animateRotate : true,
    	// 是否有从中心到边缘的动画
        animateScale : false,
    	// 图例
    	legendTemplate : '<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li>
               <%if(segments[i].label){%><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%=segments[i].label%><%}%></li><%}%></ul>',
    	// 动画完成后调用的函数(每个扇区显示对应的数据)		
           onAnimationComplete: function () {
               var ctx = this.chart.ctx;
               var segs = this.segments;
               ctx.textAlign = 'start';
               ctx.textBaseline = 'middle';
               var total = 0;
               for (var i = 0; i < segs.length; i++) {
                   total += parseFloat(segs[i].value);
               }
               ctx.fillText(total , ctx.width / 2 - 20, ctx.height / 2, 100);
               for(var i = 0; i < segs.length; i++){
                   var centreAngle = segs[i].startAngle + ((segs[i].endAngle - segs[i].startAngle) / 2),
                       rangeFromCentre = (segs[i].outerRadius - segs[i].innerRadius) / 1.5 + segs[i].innerRadius;
                   var x = segs[i].x + (Math.cos(centreAngle) * rangeFromCentre);
                   var y = segs[i].y + (Math.sin(centreAngle) * rangeFromCentre);
                   ctx.textAlign = 'center';
                   ctx.textBaseline = 'middle';
                   ctx.fillStyle = '#000';
                   ctx.font = 'normal 12px Helvetica';
                   ctx.fillText(segs[i].value, x, y);
               }
           }
    };

       // 开始绘制饼状图
    var ctx = document.getElementById('pie').getContext('2d');
    var pie = new Chart(ctx).Pie(pieData, configs);
    var legend = document.getElementById('legend');
    // 图例
    legend.innerHTML = pie.generateLegend();
    效果如图

    如图1

    追加数据

    1
    2
    3
    4
    5
    6
    7
    8
    pie.addData({
        label: '6月',
        value: 161,
        color: '#62a8ea'
    });

       pie.update();
       legend.innerHTML = pie.generateLegend();
    效果如图

    如图2

    删除数据

    饼状图中删除数据默认是从最后一条数据开始的，当然也可以指定删除的数据

    1
    2
    3
    4
    5

    // 删除末尾（5月）数据
    pie.removeData();
    pie.update();
       legend.innerHTML = pie.generateLegend();
    效果如图

    如图3 

    1
    2
    3
    4
    5

    // 删除指定位置（3月）的数据
    pie.removeData(pie.segments.length - 2);
    pie.update();
       legend.innerHTML = pie.generateLegend();
    效果如图

    如图4

    修改labels中的某个值

    1
    2
    3
    4
    5

    // 将2月=>February
    pie.segments[1].label = 'February';
    pie.update();
       legend.innerHTML = pie.generateLegend();
    效果如图

    如图5

    修改某个数据

    1
    2
    3
    4

    // 将3月的数据[100]修改为[33]
    pie.segments[2].value = 33;
    pie.update();
    效果如图

    如图6

    修改某个数据的填充色

    1
    2
    3
    4
    5
    6

    // 修改4月的填充色
       pie.segments[3].fillColor = '#F8E59B';
       pie.segments[3].highlightColor = '#F8E59B';
       pie.update();
       legend.innerHTML = pie.generateLegend();
    效果如图

    如图7

    文章目錄
    1. 1. 效果如图
  • 追加数据
    1. 1. 效果如图
  • 删除数据
    1. 1. 效果如图
    2. 2. 效果如图
  • 修改labels中的某个值
    1. 1. 效果如图
  • 修改某个数据
    1. 1. 效果如图
  • 修改某个数据的填充色
    1. 1. 效果如图
    • Fork me on GitHub