Как я могу получить стрелки в конце осей X и Y, используя highcharts.js?

Question

Я хочу получить стрелки, как на картинке выше

Answer 1

Вы можете визуализировать свои собственные фигуры и положить их поверх осевых линий. Рендеринг пользовательских форм может быть достигнут через рендерер.

Вы также можете расширить Highcharts таким образом, чтобы метод, отвечающий за рендеринг линии оси, был изменен.

Упрощенное расширение может выглядеть так:

  Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function(p, lineWidth) {
var linePath = p.call(this, lineWidth);

if (this.options.arrowOnEnd) {
  var arrowFactor = 20,
    x,
    y,
    arrowPath,
    newPath;

  if (this.horiz) {
    x = linePath[4] = linePath[4] - arrowFactor;
    y = linePath[5];

    arrowPath = [
      'L', x - 0.35 * arrowFactor, y - 0.35 * arrowFactor,
      'L', x + 1 * arrowFactor, y,
      'L', x - 0.35 * arrowFactor, y + 0.35 * arrowFactor,
      'L', x, y
    ];
    newPath = linePath.concat(arrowPath);
  } else {
    x = linePath[1];
    y = linePath[2] = linePath[2]; // + arrowFactor;

    arrowPath = [
      'M', x, y,
      'L', x - 0.35 * arrowFactor, y + 0.35 * arrowFactor,
      'L', x, y - 1 * arrowFactor,
      'L', x + 0.35 * arrowFactor, y + 0.35 * arrowFactor,
      'L', x, y
    ];

    newPath = arrowPath.concat(linePath);
  }

  return newPath;
}

return linePath;
});

CSS для заполнения стрелок:

.highcharts-axis-line {
  fill: black;
  stroke-linejoin: round;
}

пример: http://jsfiddle.net/z2aagpeu/