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

【问题标题】：Show only first and last xAxis label in Highcharts在 Highcharts 中仅显示第一个和最后一个 xAxis 标签
【发布时间】：2020-03-02 10:57:23
【问题描述】：

我只想在我的 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 是一个简短的小提琴（不知道为什么该行没有出现；它显示了鼠标悬停的值......）。

感谢任何提示。

【问题讨论】：

标签： highcharts label axis

【解决方案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

【讨论】：

谢谢你，虽然这对我不起作用。似乎 Highcharts 想要压制 xAxis 开始和结束的 »round« 数字。我设置了一个new fiddle，上面的代码没有成功，强制图表显示数据集的第一年和最后一年。
嗯，我认为在你的情况下使用 tickPositions 可能是一个很好的解决方案：jsfiddle.net/BlackLabel/wz15t6ru
哈，好的，需要更多，因为它处理数组中的数据：tickPositions: [dataset.data[0][0], dataset.data[dataset.data.length - 1][0]]。太好了，非常感谢！

【解决方案2】：

上面的答案很好，但我只是想展示另一种效果很好的方法。

在我的造型中，我这样做了；

.highcharts-xaxis-labels > text:not(:first-child):not(:last-child) {
    visibility: hidden !important;
}

【讨论】：