【发布时间】：2016-04-28 06:02:42
【问题描述】：
我是 jquery 和 javascript 的新手。我正在制作一个饼图，我想突出显示饼图的各个部分。我已经成功地制作了一个饼图，但我的问题是我突出显示。
当鼠标悬停在每块饼上时，我必须突出显示它。现在，当我在谷歌上搜索它时，有各种可用的插件，但有没有办法不用它。我尝试创建一个 jquery 函数，然后当鼠标悬停时它应该改变突出显示，但我不能这样做。
这是我的代码---
<html>
<body>
<canvas width="500" height="500" id="canvas"></canvas>
<script>
//initialize data set
var data = [ 100, 68, 20, 30, 100 ];
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
//draw background
c.fillStyle = "white";
c.fillRect(0,0,500,500);
//a list of colors
var colors = [ "orange", "green", "blue", "yellow", "teal"];
//calculate total of all data
var total = 0;
for(var i=0; i<data.length; i++)
{
total += data[i];
}
//draw pie data
var prevAngle = 0;
for(var i=0; i<data.length; i++)
{ //fraction that this pieslice represents
var fraction = data[i]/total;
//calc starting angle
var angle = prevAngle + fraction*Math.PI*2;
//draw the pie slice
c.fillStyle = colors[i];
//create a path
c.beginPath();
c.moveTo(250,250);
c.arc(250,250, 100,prevAngle, angle, false);
c.lineTo(250,250);
//fill it
c.fill();
//stroke it
c.strokeStyle = "black";
c.stroke();
//update for next time through the loop
prevAngle = angle; }
</script>
</body>
</html>
请帮我解决这个问题。我知道这很简单，但我无法弄清楚。任何帮助表示赞赏。如果您有任何问题，请发表评论？
【问题讨论】：
-
您希望在将鼠标悬停在其上时显示饼图份额的值？
-
我已经编辑了这个问题。添加了一张我想要这样的图片。
-
你需要为你需要的系列设置“sliced: true, selected: true”查看这个链接jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/…
-
@Raki 在这里他们已经 sliced:true 让它看起来与其他人不同，但我希望当光标在那里时它应该被突出显示。但我不希望当光标在那里时我想要它应该突出显示。
-
在悬停时使用 setTranslation 函数检查这个更新的小提琴jsfiddle.net/63eh9aty/1
标签： javascript jquery charts