我該如何顯示餅圖的每個部分使用javascript畫布編程的工具提示

Question

如何在餅圖的每個部分使用javascript顯示工具提示，而不使用像動力學，拉斐爾等任何js庫，以及如何分隔每個部分鼠標點擊時，鼠標在顯示工具提示上。

<script type="text/javascript"> 

function draw() 
{ 

var can=document.getElementById("can"); 
var ctx=can.getContext("2d"); 

var w=can.width/2; 
var h=can.height/2; 
    var total=startangle=endangle=radius=slices=0; 
    var data=[25,25,25,25]; 

    var color=['red','green','blue','purple']; 
    var subdata=[2,5]; 
    //collecting total value of pie 
    for(var k =0;k<data.length;k++) 
    { 
total+=data[k]; 
    } 
    //generate pie 
    for(var i=0;i<data.length;i++) 
    { 
slices=(data[i]/total); 
radius=2*Math.PI*slices; 
endangle=startangle+radius; 
ctx.beginPath(); 
ctx.arc(w, h, 75, startangle, endangle); 
ctx.lineTo(w,h); 
ctx.closePath(); 
startangle+=radius; 
ctx.fillStyle=color[i]; 
ctx.fill(); 
ctx.lineWidth=2; 

ctx.stroke(); 
} 
} 

    </script> 

Answer 1

幸運的是，Matt Doyle和Simon Meek在Elated.com上有一個教程，其中顯示了您正在尋找的內容。檢查出來：http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/