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

Question

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

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

Answer 1

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

示例：

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

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

Customizing X axis Highcharts, adding custom markers under the X axis

highcharts