javascript - Highcharts - 旋转饼图，将点击的部分对齐到固定点 (180°)

Question

我正在处理关于在用户单击饼图的一部分后旋转使用 highcharts.js 创建的饼图的可能性的请求。 给定一个 180 度 Angular 的固定点，饼图应自行对齐，将单击的部分指向该固定点，在我的例子中用三 Angular 形表示。因此，每次用户单击一个部分时，固定三 Angular 形都会指向它，同时饼图会旋转。 我已经设法捕捉到点击事件并像这样更改 startAngle 选项:

// Rotate chart
donutChart.series[0].update({
    startAngle: convertAngle("rads", this.angle) // gives the point angle in rads
});

这显然是错误的，但我想在 point-events-click 事件中做类似的事情。

为了实现这一目标，您有什么建议吗(如果可能的话)？

谢谢。

Answer 1

很酷的问题。

您的旋转算法有点缺陷。举例来说，您希望 startAngle 旋转您的 3rd 切片以从 0 度开始(图表顶部)。这将是:

-(slice1ArcDegrees + slice2ArcDegrees)

可以通过以下方式找到 ArcDegrees:

 (percentage/100.0 * 360.0)

将其放在点点击处理程序中:

  var points = this.series.points;
  var startAngle = 0;
  for (var i = 0; i < points.length; i++){
    var p = points[i];
    if (p == this)
    {
      break;
    }
    startAngle += (p.percentage/100.0 * 360.0);
  }
  this.series.update({
    startAngle: -startAngle + 180 - ((this.percentage/100.0 * 360.0)/2) // center at 180
  });

这是一个 example .