仅在Highcharts中显示第一个和最后一个xAxis标签

Question

我只想在我的xAxis上显示第一个和最后一个标签。这将为用户提供足够的“框架”。但是，我没有成功。我正在使用同步图表，该图表可以在here中找到。是我针对的（较小）图的第二和第三“列”。

我曾尝试与»startOnTick«和»endOnTick«一起工作，但不会这么做。

    xAxis: {
      crosshair: true,
      events: {
        setExtremes: syncExtremes
      },
      visible: i === 1,
      showFirstlabel: true,
      showLastlabel: true,
      startOnTick: true,
      endOnTick: true,
      labels: {
        step: 500,
        format: '{value}'
      }
    },

强制Highcharts仅显示第一个和最后一个标签的正确方法是什么？

[Here是一小段提琴（不知道为什么不显示该行；它通过鼠标悬停显示这些值...）。

感谢任何提示。

Answer 1

• 您可以使用xAxis.labels.formatter回调显示想要的刻度：

演示：https://jsfiddle.net/BlackLabel/m2Ln8sdg/

    xAxis: {
    tickAmount: 10,
        labels: {
        formatter() {
        if(this.isFirst || this.isLast) {
            return this.value
        } else {
            return ''
        }
      }
    }
  },

API：https://api.highcharts.com/highcharts/xAxis.labels.formatter

• 如果要对其进行更多控制（例如隐藏标签和刻度），可以使用load回调方法和适当的逻辑来隐藏/显示刻度：

演示：https://jsfiddle.net/BlackLabel/fbcdskmv/

  chart: {
    events: {
      load() {
        let chart = this;

        for (let i in chart.xAxis[0].ticks) {
            //hide all
          chart.xAxis[0].ticks[i].label.hide()
          chart.xAxis[0].ticks[i].mark.hide()
                    // show first and last tick
          if (chart.xAxis[0].ticks[i].isFirst || chart.xAxis[0].ticks[i].isLast) {
            chart.xAxis[0].ticks[i].mark.show()
            chart.xAxis[0].ticks[i].label.show()
          }
        }
      }
    }

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

• 或使用tickPositioner回调实现它：https://api.highcharts.com/highcharts/xAxis.tickPositioner