javascript - 设计先进的饼图

Question

我正在尝试创建一个具有高级设计的饼图(圆 Angular 百分比条)。

检查以下链接以查看设计(忽略百分比，渐变也是可选的)。

问题是我不知道如何在栏的末端有一个圆形元素。

我也希望图表是动画的(请检查 Easy Pie Chart 的动画)

我尝试了很多 jQuery 插件，但都没有成功。

想法是让 jQuery 生成的图表从 div 获取所需的信息(百分比/条形颜色/轨道颜色)。

例如

<div class="chart" data-percent="73" bar-color="#225333" track-color="#ffffff">73%</div>

非常感谢任何帮助。

Answer 1

var x = 200;
var y = 200;
var r = 50;
var ROTATION = 0;

function setcanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  ctx.translate(x,y);
  ctx.rotate((Math.PI/180)*(-ROTATION));
  ctx.translate(-x,-y);

  ctx.clearRect(0,0,c.width,c.height);
  ctx.beginPath();
  ctx.lineWidth = 2;
  ctx.strokeStyle="black";
  ctx.arc(x,y,r,0,2*Math.PI);
  ctx.stroke();
}

function getPoint(c1,c2,radius,angle) {
  return [c1+Math.cos(angle)*radius,c2+Math.sin(angle)*radius];
}

function setPercent(uplimit) {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.translate(x,y);
  ROTATION=270;
  ctx.rotate((Math.PI/180)*ROTATION);
  ctx.translate(-x,-y);
  ctx.lineWidth = 4;
  ctx.strokeStyle="red";
  ctx.arc(x,y,r,(Math.PI/180)*(uplimit),0);
  ctx.stroke();
  ctx.beginPath();
  var a = getPoint(x,y,r,(Math.PI/180)*(uplimit))[0];
  var b = getPoint(x,y,r,(Math.PI/180)*(uplimit))[1];
  nr = 5;
  ctx.arc(a,b,nr,0,2*Math.PI);
  ctx.lineWidth = 2;
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.fillStyle = "red";
  ctx.stroke();
}

function callcanvas(degree) {
  setcanvas();
  setPercent(360-degree);
}

var degree = 180;
var start = 0;
var it = window.setInterval(function() {
  callcanvas(start);
  start++;
  if(start == degree) {
    start = 0;
    window.setInterval(it);
  }
},20);

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>