highcharts - 在 Highcharts 中仅显示第一个和最后一个 xAxis 标签
问题描述
我想只显示我的 xAxis 上的第一个和最后一个标签。这将为用户提供足够的“框架”。但是,我没有成功。我正在使用同步图表,可以在此处找到。我的目标是(较小的)图表的第二和第三“列”。
我尝试使用 »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仅显示第一个和最后一个标签的正确方法是什么?
这是一个简短的小提琴(不知道为什么该行没有出现;它显示了鼠标悬停的值......)。
感谢您的任何提示。
解决方案
- 您可以使用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
- 如果您想对其进行更多控制(如隐藏标签和刻度),您可以使用加载回调方法和适当的逻辑来隐藏/显示刻度:
演示: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
推荐阅读
- html - 如何从下到上翻转wordpress wp mega menu子菜单
- angular - 从服务到组件的 Angular REST 数据
- javascript - 如何组合这些功能?
- api - 如何将多个 OpenAPI 3 规范文件组合在一起?
- android - 如何使用自定义相机解决在 Android 中自动裁剪图像的问题?
- python - 跨 numpy 数组的多个索引执行相同的自定义操作
- javascript - 在 javascript/jquery 的选择选项值中设置双引号字符串,也可以从 javascript/jquery 获取
- php - 我知道闭包可以用作变量值。但我很困惑哪些被称为这个值
- java - Selenium:带有下拉框的 HtmlUnit UnexpectedTagNameException 错误
- fatal-error - git diff 致命:不明确的参数未知修订版或路径不在工作树中