如何将 tickPositions 显示为 highcharts 中每个柱的开始和结束？答案

【问题标题】：How to show tickPositions as start and end for each bar in highcharts?如何将 tickPositions 显示为 highcharts 中每个柱的开始和结束？
【发布时间】：2020-10-11 12:01:47
【问题描述】：

我有一个包含多个条形的条形图。每个条形代表一个具有开始范围和结束范围的范围。请看附图。

我正在寻找的是在每个条与图像中标记为红色的 y 轴相交的点处对齐 tickPositions(17 和 5)。通过指定 pointPlacement 我可以手动执行此操作。但是，当图表是使用动态值动态生成时，它似乎效果不佳。

任何帮助将不胜感激。提前致谢。请看下面的代码

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    //marginLeft: 150
  },

  xAxis: {
    type: 'category',
    title: {
      text: null
    },
    max: 25,
    min: 0,
    reversed:false,
    tickPositions : [5,17]
    //tickLength: 1
  },
  yAxis: {
   // min: 0,
   // max: 10,
    title: {
      text: 'Votes',
      align: 'high'
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  plotOptions: {
            series: {
             
              borderColor: '#303030',
              color : '#cac9c9'
            },
            
          },
  series: [{
    name: 'Votes',
    data: [
      [5, 0],
      [17, 10],
      

    ],
    dataLabels: {
      //enabled: true,
      color: '#333',
      //inside: true
    }
  }]
});

【问题讨论】：

嗨@harry，你能更准确地描述这个问题吗？你如何定义范围？这里：jsfiddle.net/BlackLabel/w0vtb76L 列很窄，所以刻度会重叠。
@ppotaczek 条形图在 2 个点接触 y 轴。基本上我只是想知道是否可以在这些点显示tickPositions（在附件中标记为红色）
嗨@harry，您必须在图表创建后检查列位置并动态设置刻度位置。示例：jsfiddle.net/BlackLabel/fdtaow47
@ppotaczek 真的很棒！！！它成功了。请将其作为答案发布，以便对寻求相同解决方案的其他人有所帮助。

标签： javascript php jquery charts highcharts

【解决方案1】：

您可以在图表创建后检查列位置，将像素转换为轴值并动态设置刻度位置：

events: {
  load: function() {
    var point = this.series[0].points[0],
      xAxis = this.xAxis[0],
      x1 = xAxis.toValue(point.shapeArgs.x + this.plotTop),
      x2 = xAxis.toValue(
        point.shapeArgs.x + point.shapeArgs.width + this.plotTop
      );

    xAxis.update({
      tickPositions: [x1, x2]
    });
  }
}

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

API 参考：

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

https://api.highcharts.com/highcharts/chart.events.load

【讨论】：