Как я могу найти координаты x и y точки в круговой диаграмме? - PullRequest
0 голосов
/ 06 сентября 2018

Как я могу получить координаты 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/

Есть ли лучший способ отобразить этот значок? Например, используя маркеры, используемые для рендеринга пользовательских элементов?

EDIT:

На случай, если кому-то интересно, вот как я решил это:

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

...