Маркер не выравнивается на калибровочной диаграмме с использованием диаграммы высоты

Question

Я пытаюсь реализовать диаграмму шкалы, используя верхнюю диаграмму от -100 до +100, когда я пытался установить исходные данные> 50, означает выравнивание собственного маркера на шкале. Но если данные <50 (например, 20), это означает, что пользовательский маркер не выравнивается по линии шкалы. <a href="https://jsfiddle.net/876ojfd1/" rel="nofollow noreferrer"> JSFiddleLink

Я пытался разными способами, но не смог достичь.

Highcharts.chart('container', {
 chart: {
      style: {
        fontFamily: "FuturaPTCond",
        fontSize: "16px"
      },
      type: "solidgauge",
      events: {
        load: function() {
          var elementSVG;
          var chart = this,
            counter = 0,
            drawCircle = setInterval(function() {
              if (++counter >= 1000) {
                clearInterval(drawCircle);
              }
              renderCircle(chart);
              function renderCircle(chart) {
                let chartData = chart.userOptions.series[0].data[0];
                let color =
                  chartData < -21
                    ? "#DC143C"
                    : chartData > -21 && chartData < 21
                    ? "#FF4500"
                    : chartData > 21 && chartData < 51
                    ? "#FFFF00"
                    : chartData > 51 && chartData < 71
                    ? "#00BFFF"
                    : chartData > 71 && chartData < 91
                    ? "#ADFF2F"
                    : "#FF1493";
                var series = chart.series[0],
                  pathDivided = series.points[0].graphic.attr("d").split(" "),
                  pathElemArr = [];
                pathDivided.forEach(function(el, inx) {
                  if (el === "L") {
                    pathElemArr.push(parseFloat(pathDivided[inx + 1]));
                    pathElemArr.push(parseFloat(pathDivided[inx + 2]));
                  }
                });

                if (elementSVG) {
                  elementSVG.destroy();
                }
                document.getElementById(
                  "BackgroundColor"
                ).style.backgroundColor = "#fff";
                elementSVG = chart.renderer
                  .circle(pathElemArr[0] + 11.25, pathElemArr[1], 10)
                  .attr({
                    fill: "#fff",
                    stroke: color,
                    width: "30px",
                    "stroke-width": 8,
                    zIndex: 10,
                    startAngle: -90,
                    endAngle: 90
                  })
                  .add();

              }
            }, 1);
          $(".highcharts-axis-title").attr("x", 600.5);
          $(".highcharts-axis-title").attr("y", 395.25);
          $(".highcharts-credits").attr("x", 725);
        },
        redraw: function() {
          $(".highcharts-axis-title").attr("x", 600.5);
          $(".highcharts-axis-title").attr("y", 395.25);
          $(".highcharts-credits").attr("x", 725);
        }
      }
    },

    title: null,

    pane: {
      center: ["50%", "85%"],
      size: "98%",
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: "#ffff",
        innerRadius: "0%",
        outerRadius: "0%"
      },
      shape: "arc"
    },
    // the value axis

    yAxis: {
      lineWidth: 0,
      tickWidth: 0,
      min: -100,
      max: 100,
      title: {
        text: "<p style='font-size: 20px; font-weight: bold'>Last 30 Days</p>",
        style: {
          color: "grey"
        }
      },
      tickPositions: [-100, -20, 20, 50, 70, 90, 100],
      minorTickInterval: 0,
      tickAmount: 0,
      plotBands: [
        {
          from: -100,
          to: -23,
          borderWidth: 5,
          borderColor: "#DC143C",
          color: "#DC143C",
          outerRadius: "95%"
        },
        {
          from: -20,
          to: 18,
          borderWidth: 5,
          borderColor: "#FF4500",
          color: "#FF4500",
          outerRadius: "95%"
        },
        {
          from: 21,
          to: 48,
          borderWidth: 5,
          borderColor: "#FFFF00",
          color: "#FFFF00",
          outerRadius: "95%"
        },
        {
          from: 51,
          to: 68,
          borderWidth: 5,
          borderColor: "#00BFFF",
          color: "#00BFFF",
          outerRadius: "95%"
        },
        {
          from: 71,
          to: 88,
          borderWidth: 5,
          borderColor: "#ADFF2F",
          color: "#ADFF2F",
          outerRadius: "95%"
        },
        {
          from: 91,
          to: 100,
          borderWidth: 5,
          borderColor: "#FF1493",
          color: "#FF1493",
          outerRadius: "95%"
        }
      ],
      labels: {
        enabled: true,
        distance: 10,
        rotation: 0,
        format: "<span style='fill:#00000; font-size: 16px'>{value}</span>"
      }
    },
    plotOptions: {
      solidgauge: {
        borderColor: "#009CE8",
        borderWidth: 0,
        radius: 90,
        innerRadius: "90%",
        dataLabels: {
          enabled: true,
          y: 5,
          borderWidth: 0,
          useHTML: true,
          format:
            '<div id="BackgroundColor" style="Width: 50px;text-align:center"><span style="font-size:70px;color: #000000; margin-left: -20px">{y}</span></div>'
        }
      }
    },
    series: [
      {
        name: "Speed",
        data: [20],
        animation: {
          duration: 1500
        }
      }
    ]
  });

Answer 1

Я думаю, что-то не так с тем, как вы анализируете атрибут d пути?

Кроме того, когда вы вводите 100 в качестве данных, круг немного меньше 100?

И если у вас есть данные как 0 или 100, кружок находится на слабой синей линии, но в противном случае в нуле (в середине) он выключен от слабого синяя линия:

Это говорит о том, что позиция x правильная, но позиция y смещена в отрицательном направлении (к вершине svg) и нужно нажать вниз (перевести положительное y)

Я изменил цвет на черный, чтобы лучше видеть его, а затем вы можете увидеть transform: 'translate(0 10)', что черный круг идеально ложится на голубую линию ( а также, когда данные равны 100, они корректно совпадают с 100):

Наконец, с учетом всего внутреннего и внешнего радиуса и т. д. c. для центрирования:

Обратите внимание, что для удаления светло-голубой линии с графика добавлен следующий стиль:

<style>
.highcharts-point{
  opacity: 0;
}
</style>

Возможно, это translation(0 10) необходимо из-за этого элемента (и его перевода):

<g data-z-index="0.1" class="highcharts-series highcharts-series-0 highcharts-solidgauge-series highcharts-tracker" transform="translate(10,10) scale(1 1)" clip-path="url(#highcharts-fh3kcab-2-)"/>

Полная рабочая демонстрация: https://jsfiddle.net/alexander_L/1yewj7r5/26/