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>
---私のコードです。私はそれを簡単に知っていますが、私は理解できません。どんな助けもありがとうございます。ご質問がありましたらご意見ください。
パイの共有の値をホバリングして表示する必要がありますか? – dreamweiver
質問を編集しました。このような画像を追加しました。 – shv22
必要なシリーズについては、 "スライスされた:true、selected:true"を設定する必要があります。このリンクをチェックしてください。http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/マスター/サンプル/ハイチャート/デモ/パイ - ベーシック/ – Raki