標記未使用高度圖在儀表圖中對齊

Question

我正在嘗試使用從數據 -100 到 +100 的高圖實現儀表圖，當我嘗試將初始數據設置為 > 50 時，表示自定義標記在儀表上對齊。 但是，如果數據 < 50 （例如： 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/