Как рисовать сюжетные линии на сплошных калибровочных диаграммах

Question

Я пытаюсь показать дополнительную информацию на сплошной шкале с линией графика. Нечто похожее на синюю линию здесь

Это был самый близкий мне результат добавив plotLines в 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
    }
  },

См. JSFiddle здесь. Вам это помогает?

Answer 2

К сожалению, эта функция по умолчанию не поддерживается (так и должно быть). Однако это можно сделать, обернув метод 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;
  }
});

Демо-версия:

• https://jsfiddle.net/BlackLabel/78y5xwfg/1/