Highcharts 如何在实心量规图表上绘制绘图线

我试图在一个带有绘图线的实心仪表图上显示额外的信息。类似于这里的蓝线

这是我能达到的最接近的目标 通过将绘图线添加到yAxis，如下所示

yAxis: {
    min: 0,
    max: 200.5,
    title: {
        text: 'Speed'
    },
      plotLines: [{
        color: '#268FDD',
        width: 2,
        value: 200,
        zIndex: 5,
      }]
}

示例代码：

---

打印线可以限制在arc窗格中吗？

您可以做的是使用

tickWidth

和

tickPositions

播放一点，例如：

  yAxis: {
    min: 0,
    max: 240,
    title: {
      text: 'Speed'
    },
    tickPositions: [0, 200, 240],
    tickWidth: 3,
    tickLength: 50,
    labels: {
      distance: 17
    }
  },

---

这对你有帮助吗

不幸的是，默认情况下不支持此功能（应该支持）。但是，可以通过包装

getPlotLinePath

方法并在其中添加自定义逻辑来完成。检查下面发布的代码和演示

代码：

Highcharts.addEvent(Highcharts.Axis, 'init', function(e) {
  this.getPlotLinePath = function(options) {
    var axis = this,
      center = axis.center,
      chart = axis.chart,
      value = options.value,
      end = axis.getPosition(value),
      innerRadius = axis.pane.options.background.innerRadius,
      xAxis,
      xy,
      tickPositions,
      ret;

    var a = +innerRadius.split('').slice(0, 2).join('') / 100,
      x1 = center[0] + chart.plotLeft,
      y1 = center[1] + chart.plotTop,
      x2 = end.x,
      y2 = end.y,
      startX = x1 + a * (x2 - x1),
      startY = y1 - a * (y1 - y2);

    // Spokes
    if (axis.isCircular) {
      ret = [
        'M',
        startX,
        startY,
        'L',
        end.x,
        end.y
      ];

      // Concentric circles
    } else if (axis.options.gridLineInterpolation === 'circle') {
      value = axis.translate(value);

      // a value of 0 is in the center, so it won't be visible,
      // but draw it anyway for update and animation (#2366)
      ret = axis.getLinePath(0, value);
      // Concentric polygons
    } else {
      // Find the X axis in the same pane
      chart.xAxis.forEach(function(a) {
        if (a.pane === axis.pane) {
          xAxis = a;
        }
      });
      ret = [];
      value = axis.translate(value);
      tickPositions = xAxis.tickPositions;
      if (xAxis.autoConnect) {
        tickPositions = tickPositions.concat([tickPositions[0]]);
      }
      // Reverse the positions for concatenation of polygonal plot
      // bands
      if (reverse) {
        tickPositions = [].concat(tickPositions).reverse();
      }

      tickPositions.forEach(function(pos, i) {
        xy = xAxis.getPosition(pos, value);
        ret.push(i ? 'L' : 'M', xy.x, xy.y);
      });

    }
    return ret;
  }
});

演示：

Highcharts.addEvent(Highcharts.Axis, 'init', function(e) {
  this.getPlotLinePath = function(options) {
    var axis = this,
      center = axis.center,
      chart = axis.chart,
      value = options.value,
      end = axis.getPosition(value),
      innerRadius = axis.pane.options.background.innerRadius,
      xAxis,
      xy,
      tickPositions,
      ret;

    var a = +innerRadius.split('').slice(0, 2).join('') / 100,
      x1 = center[0] + chart.plotLeft,
      y1 = center[1] + chart.plotTop,
      x2 = end.x,
      y2 = end.y,
      startX = x1 + a * (x2 - x1),
      startY = y1 - a * (y1 - y2);

    // Spokes
    if (axis.isCircular) {
      ret = [
        'M',
        startX,
        startY,
        'L',
        end.x,
        end.y
      ];

      // Concentric circles
    } else if (axis.options.gridLineInterpolation === 'circle') {
      value = axis.translate(value);

      // a value of 0 is in the center, so it won't be visible,
      // but draw it anyway for update and animation (#2366)
      ret = axis.getLinePath(0, value);
      // Concentric polygons
    } else {
      // Find the X axis in the same pane
      chart.xAxis.forEach(function(a) {
        if (a.pane === axis.pane) {
          xAxis = a;
        }
      });
      ret = [];
      value = axis.translate(value);
      tickPositions = xAxis.tickPositions;
      if (xAxis.autoConnect) {
        tickPositions = tickPositions.concat([tickPositions[0]]);
      }
      // Reverse the positions for concatenation of polygonal plot
      // bands
      if (reverse) {
        tickPositions = [].concat(tickPositions).reverse();
      }

      tickPositions.forEach(function(pos, i) {
        xy = xAxis.getPosition(pos, value);
        ret.push(i ? 'L' : 'M', xy.x, xy.y);
      });

    }
    return ret;
  }
});