javascript - 我如何使用 javascript canvas 编程显示饼图每个部分的工具提示

Question

我如何在不使用任何 js 库(如 kinetic、Raphael 等)的情况下使用 javascript 在饼图的每个部分上显示工具提示，以及如何在鼠标单击、鼠标悬停在显示工具提示上时分隔饼图的每个部分。

<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

幸运的是，Elated.com 的 Matt Doyle 和 Simon Meek 有一个教程可以准确地显示您正在寻找的内容。查看:http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/