Я новичок в jquery и javascript. Я делаю круговую диаграмму, и я хочу выделить кусочки круговой диаграммы. Мне удалось создать круговую диаграмму, но проблема со мной - это то, что я подчеркиваю.Нужна помощь в круговой диаграмме в jquery?
Я должен выделить каждый кусок пирога, когда мышь над ним. Теперь, когда я ищу его в google, тогда доступны различные плагины, но есть ли способ обойтись без него. Я попытался создать функцию 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>
Круговая диаграмма должна быть выделено что-то, как показано ниже:
Пожалуйста, помогите мне с этим. Я знаю, это просто, но я не могу понять. Любая помощь приветствуется. Прокомментируйте, если у вас возникли вопросы?
Вы хотите, чтобы значение доли пирога показывалось при зависании над ним? – dreamweiver
Я отредактировал вопрос. Добавлено изображение, я хочу что-то вроде этого. – shv22
вам нужно установить «нарезанный: true, selected: true» для серии, в которой вы нуждаетесь, проверьте эту ссылку http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/ master/samples/highcharts/demo/pie-basic/ – Raki