javascript - 饼图里面label的标线是根据什么画出来的?

伊谢尔伦 2017-04-10 17:26:38

[JavaScript讨论组]

407

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(3)

巴扎黑2017-04-10 17:28:38 3楼

应该是svg或者html5做出来的。
一个酷炫的采用了svg技术的网页：Eric Wang

赞 +0

添加回复

大家讲道理2017-04-10 17:28:38 2楼

贴自己写的一个小组件，使用的canvas，很简陋，不过文字是直接绘制在图上的。线是怎么绘制出来的
每次确定路径后把笔触移到圆心上，然后改变将要绘制的扇形颜色，确定开始角度和结束角度，就行了
可参考：这里
代码效果如下
代码如下：

<!DOCTYPE html>
<html lang="zh-CN-hans">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css" media="screen">
    #a{
      border: 1px solid #000;
    }
  </style>
</head>
<body>
</body>
<script type="text/javascript">

function Pie(options){
  this.id=options.id;
  this.x=options.x;
  this.y=options.y;
  this.width=options.width;
  this.height=options.height;
  this.radius=options.radius;
  this.data=options.data;
  this.isLegend=options.isLegend;
  this.init();
}
Pie.prototype={
   init:function(){
     this.create();
     //var fun=this.isLegend?true:this.addLabel()||function(){};
   },
   create:function(){
      var canvas=document.createElement('canvas');
      canvas.id=this.id;
      canvas.width=this.width;
      canvas.height=this.height;
      document.body.appendChild(canvas);
      var ctx=document.getElementById(this.id).getContext('2d');
      var total=0;
      var startAngle=0;
      var angle=0;
      this.data.forEach(function(item){
          total+=item.value;
      });
      var self=this;//缓存this
      this.data.forEach(function(item){
            angle=Math.PI*(2*item.value/total);
            self.paint(item,ctx,total,startAngle,angle);
            self.addData(item,ctx,startAngle,angle);
             startAngle+=angle;
      }); 
   },
   addData:function (item,ctx,startAngle,angle){
        var fontSize=this.radius/10;
        //var lradius=this.radius;
        var dx=this.x+this.radius*Math.cos(startAngle+angle/2)/2-item.name.length*fontSize/2;
        var dy=this.y+this.radius*Math.sin(startAngle+angle/2)/2;
        ctx.beginPath();
        ctx.moveTo(this.x,this.y);
        ctx.fillStyle='#fff';
        ctx.font=fontSize+'px';
        ctx.fillText(item.name,dx,dy);
        ctx.closePath();
        ctx.fill();
   },
   paint:function(item,ctx,total,startAngle,angle){
         ctx.beginPath();
         ctx.moveTo(this.x,this.y);
         ctx.arc(this.x,this.y,this.radius,startAngle,startAngle+angle,false);
         ctx.lineTo(this.x,this.y);
         ctx.fillStyle=item.color;
         ctx.fill();
     }
};
  var data=[
   {
    name:'ie',
    value:20,
    color:'black'
   },
   {
     name:'chrome',
     value:30,
     color:'red'
   },
   {
    name:'firfox',
    value:50,
    color:'grey'
   },
   {
    name:'edge',
    value:30,
    color:'#455'
   }
];
window.onload=function(){
   var p=new Pie({
    id:'a',
    width:'300',
    height:'300',
    radius:'100',
    x:100,
    y:100,
    data:data
   });
}
</script>
</html>

赞 +0

添加回复

PHPz2017-04-10 17:28:38 1楼

svg 或者canvas 网上有很多教程和例子

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>