Question

我正在尝试在带有标线的实心规图表上显示其他信息。类似于 here

处的蓝线

这是我能够达到的最接近的 here 通过像这样将绘图线添加到yAxis

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

示例代码：JSfiddle

可以将绘图线限制在弧形窗格吗？

Answer 1

您可以做的是与tickWidth和tickPositions一起玩，例如：

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

See a JSFiddle here.这对您有帮助吗？

Answer 2

不幸的是，默认情况下不支持此功能（应该支持）。但是，可以通过包装getPlotLinePath方法并在其中添加自定义逻辑来完成。检查下面发布的代码和演示。

代码：

Highcharts.addEvent(Highcharts.Axis, 'init', function(e) {
  this.getPlotLinePath = function(value, reverse) {

    var axis = this,
      center = axis.center,
      chart = axis.chart,
      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;
  }
});

演示：

https://jsfiddle.net/BlackLabel/o5qsar6v/1/

如何在实体仪表图上绘制绘图线

2 个答案: