自定义X轴Highcharts，在X轴下添加自定义标记

Question

我正在尝试将此用例实现为附加图像。

使用 Highcharts 创建此自定义图表图表刻度在图表内我面临的问题是在 X 轴下为某些值添加一些自定义标记（带有 + 的黄色标记）。

Answer 1

目前唯一的方法似乎是使用Highcharts.SVGRenderer class 并创建自定义形状 - circle 、 text和path 。 您可以通过toPixels方法轻松计算基于 x 轴和 y 轴的像素 position。

例子：

events: {
  load: function() {
    var xAxis = this.xAxis[0],
      yAxis = this.yAxis[0],
      r = 10,
      distance = 40,
      y = yAxis.toPixels(0),
      x = xAxis.toPixels(3);

    this.renderer.text('+', x, y + distance + r, 'circle')
      .css({
        transform: 'translate(-50%, -50%)'
      }).add();

    this.renderer.circle(x, y + distance, r).attr({
      fill: '#FCFFC5',
      stroke: 'black',
      'stroke-width': 1
    }).add();

    this.renderer.path(['M', x, y, 'L', x, y + distance - r])
      .attr({
        'stroke-width': 1,
        stroke: 'black'
      })
      .add();
  }
}

---

现场演示： http://jsfiddle.net/BlackLabel/ukfocb7y/

API 参考资料：

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels