标记未通过高图在量表中对齐

Question

[当我尝试设置初始数据时，我尝试使用从-100到+100的高位图表来实现仪表图> 50表示自定义标记在仪表上对齐。但是，如果数据<50（Ex：20）表示自定义标记未在量规线上对齐。 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对齐）：

最后，调整所有的内部和外部半径等以使其居中：

请注意，添加了以下样式以从图表中删除浅蓝色线：

<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/