Javascript 具有先进设计的饼图

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

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

问题是我不知道如何在条的末尾有一个圆角元素

我也希望图表是动画请检查简单的饼图的动画

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

其思想是让jQuery生成的图表从div获取所需的信息百分比/条形图颜色/轨迹颜色

e、 g

---

任何帮助都将不胜感激。

这并不完全正确。我不知道jquery。但我认为这可以通过html5画布实现。首先，你必须在画布上画一个半径为R的圆，然后在画布上使用蓝色的弧函数来画D度的弧。显然，应该有一个javascript函数，它取D值并画出合适的弧，然后你可以将蓝点放在x=xCenter+radius*cosangle y=yCenter+radius*sinangle。过一段时间我会给你提供准确的代码。

var x=200； 变量y=200； var r=50； var旋转=0； 函数集画布{ var c=document.getElementByIdmyCanvas； var ctx=c.getContext2d； ctx.translatex，y； ctx.旋转速度PI/180*-旋转； ctx.translate-x，-y； ctx.clearRect0,0，c.宽度，c.高度； ctx.beginPath； ctx.lineWidth=2； ctx.strokeStyle=黑色； ctx.arcx，y，r，0,2*Math.PI； ctx.stroke； } 函数getPointc1、c2、半径、角度{ 返回[c1+数学余弦角*半径，c2+数学正弦角*半径]； } 函数setPercentuplimit{ var c=document.getElementByIdmyCanvas； var ctx=c.getContext2d； ctx.beginPath； ctx.translatex，y； 旋转=270； ctx.旋转速度PI/180*旋转； ctx.translate-x，-y； ctx.lineWidth=4； ctx.strokeStyle=红色； ctx.arcx，y，r，Math.PI/180*uplimit，0； ctx.stroke； ctx.beginPath； var a=getPointx，y，r，Math.PI/180*uplimit[0]； var b=getPointx，y，r，Math.PI/180*uplimit[1]； nr=5； ctx.arca，b，nr，0,2*Math.PI； ctx.lineWidth=2； ctx.fillStyle='红色'； ctx.fill； ctx.fillStyle=红色； ctx.stroke； } 函数调用可扩展度{ setcanvas； 360度； } 变异度=180； var start=0； var it=window.setIntervalfunction{ callcanvasstart； 启动++； ifstart==度{ 开始=0； window.setIntervalit； } },20; 您的浏览器不支持HTML5画布标记。 //==========配置窗口 //======我在这里编写了此配置代码，您可以更改值并进行实验 var x=200//在这里设置x中心 变量y=200//在这里设置y中心 var r=50//在这里设置半径 var线宽=50//在此处设置线宽 var SET_COLOR=00FFFF//在这里设置颜色 var SET_PERCENTAGE=85//在此处设置百分比 //======== var-load=false； window.onload=函数{ var status=document.getElementById'status'； status.style.top=y+'px'； status.style.left=x+'px'； 加载=真； } var旋转=0； 函数集画布{ var c=document.getElementByIdmyCanvas； var ctx=c.getContext2d； ctx.translatex，y； ctx.旋转速度PI/180*-旋转； ctx.translate-x，-y； ctx.clearRect0,0，c.宽度，c.高度； ctx.beginPath； ctx.lineWidth=2； ctx.strokeStyle=黑色； ctx.arcx，y，r+线宽/2,0,2*Math.PI； ctx.globalAlpha=0.1； ctx.stroke； ctx.beginPath； ctx.lineWidth=2； ctx.strokeStyle=黑色； ctx.arcx，y，r-线宽/2,0,2*Math.PI； ctx.stroke； } 函数getPointc1、c2、半径、角度{ 返回[c1+数学余弦角*半径，c2+数学正弦角*半径]； } 函数setPercentuplimit{ var c=document.getElementByIdmyCanvas； var ctx=c.getContext2d； ctx.beginPath； ctx.translatex，y； 旋转=270； ctx.旋转速度PI/180*旋转； ctx.translate-x，-y； ctx.lineWidth=lineWidth；//40 ctx.strokeStyle=设置颜色； ctx.arcx，y，r，Math.PI/180*uplimit，0； ctx.globalAlpha=1； ctx.stroke； ctx.beginPath； var a=getPointx，y，r，Math.PI/180*uplimit[0]； var b=getPointx，y，r，Math.PI/180*uplimit[1]； nr=线宽/2； ctx.lineWidth=1； ctx.strokeStyle=白色； ctx.arca，b，nr，0,2*Math.PI； ctx.fillStyle=白色； ctx.fill； ctx.stroke； ctx.beginPath； var a=getPointx，y，r，Math.PI/180*uplimit[0]； var b=getPointx，y，r，Math.PI/180*uplimit[1]； nr=线宽/2-3； ctx.lineWidth=1； ctx.strokeStyle=白色； ctx.arca，b，nr，0,2*Math.PI； ctx.fillStyle=设置颜色； ctx.fill； ctx.stroke； } 函数调用可扩展度{ setcanvas； 360度； } 变量度=parseIntSET_百分比*360/100； var start=0； var it=window.setIntervalfunction{ callcanvasstart； 启动++； ifstart==度{ 开始=0； window.setIntervalit； } i装载 document.getElementByIdstatus.innerHTML=parseIntstart*100/360+“%”； },1; 0% 您的浏览器不支持HTML5画布标记。

---

如果它不需要jQuery，只需要一个简单的javascript就更好了。等待更多信息，谢谢

---

下面是很多代码，你只需要设置javascript代码的等级，你可以在我的网站上查看输出：-太棒了，谢谢你的帮助。我还有一些问题。1.有没有办法用渐变替换颜色？我试过使用ctx.createLinearGradient，但似乎无法产生纯色2。有没有办法让酒吧从左边转到右边。如何使脚本只运行一次？4.有没有办法加快动画的速度？是的，你可以通过将setInterval的值从20更改为任何值来加快动画的速度，值越小，速度就越快。对于其余2，我将很快为你提供新代码。我发布了新代码。这一个非常完美。你可以更改值形状和颜色。：-代码可以在我的网站上找到，请尝试更新我的代码。

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