Question

您可以帮我设置此代码。我不太擅长html5。

如果您的浏览器不支持HTML5 Canvas，则会显示此文本。

$(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
});

如何为每个切片添加悬停效果？

Answer 1

将楔形物绘制到画布后，它们只会变成较大图像中的像素。

此时您无法跟踪各个饼形楔形。因此无法追踪任何特定楔形物的悬停。

但是......你确实有几种选择！

选项＃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库，可以跟踪饼图中的每个楔形，从而实现悬停效果。几个好的库（在很多好的库中）是：EaselJs，FabricJs和KineticJs。

Elated.com有一个很棒的教程，可以显示您正在寻找的内容。看看：http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/

如何为每个切片添加悬停效果（html5画布）

1 个答案: