具有高級設計的餅圖

我正嘗試使用高級設計創建餅圖（圓形百分比欄）。具有高級設計的餅圖

檢查以下鏈接以查看設計（忽略百分比，也是可選梯度）。

First chart design

Second chart design

問題是我不明白如何在欄的末尾有一個圓形的元素。

我也想是動畫圖表（請檢查動畫的簡易餅圖）

我有很多jQuery插件，但沒有成功嘗試。

這個想法是讓jQuery生成的圖表從div中獲取所需的信息（百分比/條形顏色/曲目顏色）。

e.g

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

任何幫助將非常感激。

來源

2014-12-13 Ryuka

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>

來源

2014-12-14 18:21:33

它不完全正確。我不知道jquery.But我認爲這可以通過html5畫布完成。首先你必須在畫布上做一個半徑爲R的圓，然後在畫布上使用藍色的圓弧函數來生成D度的弧。顯然，應該有一個JavaScript函數，它取值爲D並做出合適的弧，然後您可以將藍點放置在x = xCenter + radius * cos（角度）y = yCenter + radius * sin（角度）。我會在一段時間後爲您提供確切的代碼。

來源

2014-12-13 09:31:29

即使不需要jQuery的，只有一個簡單的JavaScript更好。等待更多的信息，非常感謝 – Ryuka 2014-12-14 06:23:47

代碼發佈在下面，你只需要設置javascript代碼的程度，你可以在我的網站上查看輸出http://vitideas.in/web/ :-) – 2014-12-14 18:21:16

真棒，謝謝你的幫助。我還有一些問題。 1.有沒有辦法用漸變代替顏色？我試着用ctx.createLinearGradient，但似乎不工作（導致一個純色）2.有沒有辦法讓酒吧從左側走向右側3.如何讓腳本只運行一次？ 4.有沒有加快動畫的方法？ – Ryuka 2014-12-15 06:47:03

//======== CONFIGURATION WINDOW 
 
//======== i made this configuration code here you can change value and experiment 
 
var x = 200;//set the x - center here 
 
var y = 200;//set the y - center here 
 
var r = 50;//set the radius here 
 
var linewidth=50;//set the line width here 
 
var SET_COLOR="#00FFFF";//set the color here 
 
var SET_PERCENTAGE = 85 //set the percentage here 
 
//======== 
 

 
var loaded = false; 
 
window.onload = function() { 
 
    var status=document.getElementById('status'); 
 
    status.style.top=y+'px'; 
 
    status.style.left=x+'px'; 
 
    loaded = true; 
 
} 
 

 

 
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+(linewidth/2),0,2*Math.PI); 
 
    ctx.globalAlpha=0.1; 
 
    ctx.stroke(); 
 

 
    ctx.beginPath(); 
 
    ctx.lineWidth = 2; 
 
    ctx.strokeStyle="black"; 
 
    ctx.arc(x,y,r-(linewidth/2),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 = linewidth;//40 
 
    ctx.strokeStyle=SET_COLOR; 
 
    ctx.arc(x,y,r,(Math.PI/180)*(uplimit),0); 
 
    ctx.globalAlpha=1; 
 
    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 = linewidth/2; 
 
    ctx.lineWidth = 1; 
 
    ctx.strokeStyle="white"; 
 
    ctx.arc(a,b,nr,0,2*Math.PI); 
 
    ctx.fillStyle="white"; 
 
    ctx.fill(); 
 
    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 = linewidth/2-3; 
 
    ctx.lineWidth = 1; 
 
    ctx.strokeStyle="white"; 
 
    ctx.arc(a,b,nr,0,2*Math.PI); 
 
    ctx.fillStyle=SET_COLOR; 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
} 
 

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

 
var degree = parseInt((SET_PERCENTAGE*360)/100); 
 
var start = 0; 
 
var it = window.setInterval(function(){ 
 
    callcanvas(start); 
 
    start++; 
 
    if(start == degree) { 
 
    start = 0; 
 
    window.setInterval(it); 
 
    } 
 
    if(loaded) 
 
    document.getElementById("status").innerHTML = parseInt((start*100)/360)+'%'; 
 
},1);

<div style='position:absolute;top:0px;left:0px;' id='status'> 
 
    0% 
 
</div> 
 

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

來源

2014-12-16 06:13:22

具有高級設計的餅圖

回答

相關問題