Question

我是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>

饼图应突出显示如下：

请帮我解决这个问题。我知道这很简单，但我无法弄明白。任何帮助表示赞赏。如果您有任何疑问，请评论？

Answer 1

@Shubham Vashishtha：检查这个小提琴。 http://jsfiddle.net/63eh9aty/2/ 在这里，我创建了一个Json变量选项，它需要设置highcharts，然后下一步是向系列添加数据。这是通过创建一个名为＆＃34; seriesOptions 的Json变量来实现的，该变量包含 name，data：[] （即数组）。为了将实际数据插入数据：[] ，我创建了 dataOptions 变量。接下来将数据分配到 dataOptions 并将每个 dataOptions 添加到 seriesOptions ，最后将seriesOptions数据添加到高图的实际series .ie < strong> options.series.push（seriesOptions），如小提琴中所示。

在jquery中的饼图中需要帮助？

1 个答案: