2016-04-28 5 views
2

私はjqueryとjavascriptを初めて使用しています。私は円グラフを作成しており、円グラフの部分を強調したいと思います。私はパイチャートを作ることに成功しましたが、私の問題は私が強調しています。jqueryの円グラフのヘルプが必要ですか?

マウスが上に来ると、すべてのパイを強調表示する必要があります。今、Googleで検索すると、さまざまなプラグインが使用可能ですが、それなしで行う方法があります。 jquery関数を作成してみましたが、マウスオーバーするとハイライトが変わるはずですが、そのようにはできません。これで私を助けてください enter image description here

:ここ

は、円グラフは、以下のようなものを強調表示されます

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

---私のコードです。私はそれを簡単に知っていますが、私は理解できません。どんな助けもありがとうございます。ご質問がありましたらご意見ください。

+0

パイの共有の値をホバリングして表示する必要がありますか? – dreamweiver

+0

質問を編集しました。このような画像を追加しました。 – shv22

+1

必要なシリーズについては、 "スライスされた:true、selected:true"を設定する必要があります。このリンクをチェックしてください。http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/マスター/サンプル/ハイチャート/デモ/パイ - ベーシック/ – Raki

答えて

関連する問題