Question

如何获取点的X和Y坐标？

我想在饼图的两点之间的弧线上放置一个徽章。现在，我使用图表渲染器添加圆圈和文本。

$(function() {
  $('#chart').highcharts({
    chart: {
      type: 'pie',
      options3d: {
        enabled: false,
        alpha: 0
      },
      height: 470
    },
    colors: ['#EF3F3E', '#757575'],
    title: {
      style: {
        fontSize: '90px',
        align: 'center',
        color: '#EF3F3E'
      },
      verticalAlign: 'middle'
    },
    tooltip: {
      enabled: false
    },
    plotOptions: {
      pie: {
        innerSize: 420,
        dataLabels: {
          enabled: false
        },
        shadow: false,
        center: ['50%', '50%'],
        borderWidth: 0
      }
    },
    series: [{
      name: 'Delivered amount',
      data: [56, 44]
    }]
  }, function(chart) { // on complete

    chart.setTitle({
      color: "#333333",
    });

    chart.renderer.circle(650, 420, 50).attr({
      fill: '#3A3A3B',
      'stroke-width': 0,
      zIndex: 3
    }).add();

    chart.renderer.circle(650, 420, 40).attr({
      fill: '#EF3F3E',
      'stroke-width': 0,
      zIndex: 4
    }).add();

    chart.customText = chart.renderer.text('30', 635, 430)
      .css({
        color: 'black',
        font: '28px Arial, sans-serif',
        'z-index': '5'
      }).attr({
        zIndex: 5
      }).add();
  });
});

https://jsfiddle.net/yq2s5ng1/5/

是否有更好的方法来显示此徽章？例如使用标记呈现自定义元素的标记？

编辑：

万一有兴趣的人，这是我解决的方法：

function getCoordinates() {
    var x;
    var y;
    var h = chart.series[0].data[0].shapeArgs.x;
    var k = chart.series[0].data[0].shapeArgs.y;
    var r = chart.series[0].data[0].shapeArgs.innerR;
    //var theta = chart.series[0].data[0].angle;
    //var theta = chart.series[0].data[0].series.endAngleRad;
    var theta = chart.series[0].data[0].shapeArgs.end;

    x = h + r * Math.cos(theta);
    y = k + r * Math.sin(theta);

    return { x: x, y: y };
}

这篇文章帮助我找到了笛卡尔坐标：https://math.stackexchange.com/questions/475917/how-to-find-position-of-a-point-based-on-known-angle-radius-and-center-of-rotat

如何找到饼状点的x和y坐标？

0 个答案: