-1

こんにちは、このコードの設定を手伝ってもらえますか。私はhtml5があまり得意ではありません。

このテキストは、ブラウザがHTML5Canvasをサポートしていない場合に表示されます。 

$(document).ready(function() {
    // initialize some variables for the chart
    var 

canvas = $("#canvas")[0];
        var ctx = canvas.getContext('2d');
        var data = [75,68,32,95,20,51];
        var colors = ["#7E3817", "#C35817", "#EE9A4D", "#A0C544", "#348017", "#307D7E"];
        var center = [canvas.width / 2, canvas.height / 2];
        var radius = Math.min(canvas.width, canvas.height) / 2;
        var lastPosition = 0, total = 0;
        var pieData = [];

    // total up all the data for chart
    for (var i in data) { total += data[i]; }

    // populate arrays for each slice
    for(var i in data) {
        pieData[i] = [];
        pieData[i]['value'] = data[i];
        pieData[i]['krasa'] = colors[i];
        pieData[i]['startAngle'] = 2 * Math.PI * lastPosition;
        pieData[i]['endAngle'] = 2 * Math.PI * (lastPosition + (data[i]/total));
        lastPosition += data[i]/total;
    }

function drawChart()
    {
        for(var i = 0; i < data.length; i++)
        {
            var gradient = ctx.createLinearGradient( 0, 0, canvas.width, canvas.height );
            gradient.addColorStop( 0, "#ddd" );
            gradient.addColorStop( 1, colors[i] );
            ctx.beginPath();
            ctx.moveTo(center[0],center[1]);
            ctx.arc(center[0],center[1],radius,pieData[i]['startAngle'],pieData[i]['endAngle'],false);
            ctx.lineTo(center[0],center[1]);
            ctx.closePath();
            ctx.fillStyle = gradient;
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#fff";
            ctx.stroke();
        }
    }

    drawChart(); // first render
});

各スライスにホバー効果を追加するにはどうすればよいですか？

4

1 に答える 1

3

ウェッジをキャンバスに描画すると、大きな画像のピクセルになります。

この時点では、個々のパイウェッジを追跡する方法はありません。したがって、特定のウェッジでホバーを追跡する方法はありません。

しかし...あなたにはいくつかの選択肢があります！

オプション＃1 ---独自のヒットテストを作成して、クリックしたパイウェッジを特定します。

これは次のようになります（私はこれをテストしていません!!!）

var chartStartAngle=0;  // you started drawing the pie at angle 0

function handleChartClick ( clickEvent ) {

    // Get the mouse cursor position at the time of the click, relative to the canvas
    var mouseX = clickEvent.pageX - this.offsetLeft;
    var mouseY = clickEvent.pageY - this.offsetTop;

    // Was the click inside the pie chart?
    var xFromCenter = mouseX - center[0];
    var yFromCenter = mouseY - center[1];
    var distanceFromCenter = Math.sqrt( Math.pow( Math.abs( xFromCenter ), 2 ) + Math.pow( Math.abs( yFromCenter ), 2 ) );

    if ( distanceFromCenter <= radius ) {

      // You clicked inside the chart.
      // So get the click angle 
      var clickAngle = Math.atan2( yFromCenter, xFromCenter ) - chartStartAngle;

      if ( clickAngle < 0 ) clickAngle = 2 * Math.PI + clickAngle;

      for ( var i in pieData ) {
        if ( clickAngle >= pieData[i]['startAngle'] && clickAngle <= pieData[i]['endAngle'] ) {
          // You clicked on pieData[i]
          // So do your effect here!
          return;
        }
      }
    }
  }

オプション＃2 ---円グラフの各くさびを追跡できるようにするcavasライブラリを使用して、ホバー効果を実行します。（多くの優れたライブラリの中で）いくつかの優れたライブラリは、EaselJ、FabricJ、およびKineticJです。

Elated.comには、探しているものを示す優れたチュートリアルがあります。それをチェックしてください：http ：//www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/

于 2013-02-15T20:57:56.900 に答える