canvas 原生实现饼状图

56 阅读 0 评论 37 点赞

我是靠谱客的博主忧虑手套，最近开发中收集的这篇文章主要介绍canvas 原生实现饼状图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

预览效果

直接上代码

    var spend = 4, 
     data = [
      {
        name:'小明',
        money:11200,
        color:"#2562d9"
      },
      {
        name:'小红',
        money:36277,
        color:"#229322"
      },
      {
        name:'小黑',
        money:87451,
        color:"#25d98b"
      },
      {
        name:'小白',
        money:47854,
        color:"#d925a6"
      },
      {
        name:'小绿',
        money:117854,
        color:"#d99125"
      },
      {
        name:'小蓝',
        money:48951,
        color:"#f00"
      }
    ]
    
    function DrawArc(content,start,end,color){
      content.beginPath();
      content.moveTo(canvas.width / 2,canvas.height / 2);
      content.fillStyle = color;
      content.arc(canvas.width / 2,canvas.height / 2,100,start * Math.PI / 180,end * Math.PI / 180,false)
      content.closePath();
      content.fill()
    }
    function charts(){
      var cvs = document.querySelector('#canvas');
      var ctx = cvs.getContext('2d');
      ctx.clearRect(0,0,cvs.width,cvs.height);
      for(let i = 0; i < data.length; ++i){
        DrawArc(ctx,data[i].starting,data[i].ending,data[i].color)
      }
    }
    function every(data){
      let pd = false;
      for(let i = 0; i < data.length; ++i){
        if(data[i].starting >= data[i].start && data[i].ending >= data[i].end){
          pd = true;
        }else{
          pd = false;
        }
      }
      return pd
    }
    (function init(){
      var moneyCount = data.reduce((curr,next) => curr + next.money,0);
      var starts = 0,end = 0,pd = false;
      for(let i = 0; i < data.length; ++i){
        const bili = data[i].money / moneyCount * 100 * 3.6;
        data[i].start = starts == 0 ? 0 : Math.floor(starts + 1),
        data[i].end = bili + starts == 360 ? 360 :Math.floor(bili + starts + 1),
        data[i].starting = i,
        data[i].ending = i + 1;
        starts += bili;
      }
      function start(){
        for(let i = 0; i < data.length; ++i){
          if(data[i].starting < data[i].start){
            data[i].starting + spend  > data[i].start ? data[i].starting = data[i].start : data[i].starting += spend;
          }
          if(data[i].ending < data[i].end){
            data[i].ending + spend  > data[i].end ? data[i].ending = data[i].end : data[i].ending += spend;
          }
        }
        charts();
        pd = every(data);
        if(!pd){
          requestAnimationFrame(start)
        }
      }
      start()
    })()