仅显示 highcharts 中的第一个和最后一个x轴标签

w80xi6nr  于 2022-11-10  发布在  Highcharts
关注(0)|答案(3)|浏览(313)

我想只显示我的xAxis上的第一个和最后一个标签。这会给予用户足够的一个frame。但是,我没有成功。我正在使用一个同步图表,可以在here中找到。我的目标是(较小的)图表的第二个和第三个column。
我试着使用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是一个小提琴(不知道为什么线没有出现;鼠标悬停时显示值...)。
谢谢你的提示。

yzckvree

yzckvree1#

  • 您可以使用xAxis.labels.formatter回调来显示所需的刻度:

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

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

应用编程接口: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()
          }
        }
      }
    }

应用编程接口:https://api.highcharts.com/highcharts/chart.events.load

ycl3bljg

ycl3bljg2#

上面的答案是好的,但我只是想展示另一种方法,它的工作刚刚好。
在我的造型我这样做;

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

oprakyz73#

总结@luftikus143和@塞巴斯蒂安·温泽尔的评论:

const data = [
    ['Jan 2020', 167],
    ['Feb 2020', 170],
    ['Mar 2020', 172]
];

xAxis: {
  type: 'category',
  tickPositions: [0, data.length - 1]
}

将只输出第一个和最后一个标签。@martinethyl的解决方案可能需要一些额外的调整,特别是如果您有多个数据点。建议(可能不适用于较小的媒体类型):

xAxis: {
      type: 'category',
      labels: {
        rotation: 0,
        x: 5, // Optional: moves labels along the x-axis
        style: {
          textOverflow: 'none', // Removes ellipsis
          whiteSpace: 'nowrap', // Gets the label text in one line
        },
      },

相关问题