我是 jquery 和 javascript 的新手。我正在制作饼图，我想突出显示饼图的各个部分。我已经成功地制作了饼图，但我的问题是突出显示。
当鼠标悬停在每 block 馅饼上时，我必须突出显示它。现在，当我在谷歌上搜索它时，有各种可用的插件，但有没有办法不用它呢？我尝试创建一个 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>
饼图应突出显示如下所示:
请帮我解决这个问题。我知道这很简单，但我无法弄清楚。任何帮助表示赞赏。如果您有任何问题，请发表评论？
最佳答案
@Shubham Vashishtha:检查这个 fiddle 。 http://jsfiddle.net/63eh9aty/2/
在这里，我创建了一个 Json 变量 options，它需要设置 highcharts，然后下一步是向系列添加数据。这是通过创建一个名为 "seriesOptions 的 Json 变量来实现的，其中包含 name, data: [ ] (这是数组)。为了插入实际数据到 data:[ ] 我已经创建了 dataOptions 变量。
接下来将数据分配给 dataOptions 并将每个 dataOptions 添加到 seriesOptions 最后将 seriesOptions 数据添加到 highchart 的实际 series .即 options.series.push(seriesOptions) 如 fiddle 所示。
关于javascript - 在 jquery 饼图方面需要帮助？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36906449/