2016-04-28 2 views
2

Я новичок в 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> 

Круговая диаграмма должна быть выделено что-то, как показано ниже: enter image description here

Пожалуйста, помогите мне с этим. Я знаю, это просто, но я не могу понять. Любая помощь приветствуется. Прокомментируйте, если у вас возникли вопросы?

+0

Вы хотите, чтобы значение доли пирога показывалось при зависании над ним? – dreamweiver

+0

Я отредактировал вопрос. Добавлено изображение, я хочу что-то вроде этого. – shv22

+1

вам нужно установить «нарезанный: true, selected: true» для серии, в которой вы нуждаетесь, проверьте эту ссылку http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/ master/samples/highcharts/demo/pie-basic/ – Raki

ответ

1

@Shubham Vashishtha: проверьте эту скрипку. http://jsfiddle.net/63eh9aty/2/ Здесь я создал переменную Jsonопции, которая потребовала установки для высоких диаграмм, затем следующим шагом является добавление данных в серию. которая реализуется путем создания Json переменной «seriesOptions который содержит имени, данные:. [] (который является массив) Для того, чтобы вставить фактические данные в данных: [] я создал dataOptions переменных. Следующая присвоение данных для dataOptions и добавление каждого dataOptions к seriesOptions, наконец, добавление данных seriesOptions к фактическому series из highchart .ie options.series.push (seriesOptions), как показано на скрипке.

+0

, это очень хорошо ... большое вам спасибо за ваши усилия ... можете ли вы, пожалуйста, просто сказать мне как узнать, какое ключевое слово используется для какого-либо свойства. Как если бы вы захотели получить какие-либо другие функции, и где я могу проверить? – shv22

+0

, вы можете сослаться на этот http://api.highcharts.com/highcharts, если мои ответы будут полезны для голосования. – Raki

+0

да, это было очень полезно ... еще раз спасибо ... Еще одна вещь, пожалуйста, скажите мне, как удалить эту самую верхнюю икону, которая используется для значка графика печати и т. д. Я посетил [api.highcharts.com/highcharts], но не смог найти его – shv22

Смежные вопросы