Javascript Highcharts将x轴上的第一个和最后一个记号调整为直接值
我当前的x轴如下图所示: 我需要将第一个和最后一个刻度调整到最小和最大值。 所以我们假设第一个勾号是26.4.2015 18:38:36,最后一个勾号是27.4.2015 9:07:27。其余的刻度应自动计算Javascript Highcharts将x轴上的第一个和最后一个记号调整为直接值,javascript,charts,highcharts,axis,Javascript,Charts,Highcharts,Axis,我当前的x轴如下图所示: 我需要将第一个和最后一个刻度调整到最小和最大值。 所以我们假设第一个勾号是26.4.2015 18:38:36,最后一个勾号是27.4.2015 9:07:27。其余的刻度应自动计算 $('#container').highcharts({ chart: { zoomType: "x" }, xAxis: { type: "datetime", title: { text: "Time" }, minPa
$('#container').highcharts({
chart: {
zoomType: "x"
},
xAxis: {
type: "datetime",
title: {
text: "Time"
},
minPadding: 0,
maxPadding: 0,
min: 1430073516000,
tickmarkPlacement: "on",
showFirstLabel: true,
showLastLabel: true,
startOnTick: false,
endOnTick: false,
labels: {
formatter() {
if (this.isFirst || this.isLast) {
return Highcharts.dateFormat("%e.%m.%Y %H:%M:%S", this.value);
} else {
return this.axis.defaultLabelFormatter.call(this);
}
}
}
},
yAxis: {
title: {
text: "Value"
}
},
tooltip: {
shared: true
},
series: [
{
id: "First",
name: "First",
marker: {
enabled: false
},
data: [0, 0, 0, 0, 0, 0, 242, 542, 456, 422, 445, 884, 123],
pointStart: 1430073516000,
pointInterval: 60000
},
{
id: "Second",
name: "Second",
marker: {
enabled: false
},
data: [0, 0, 0, 25, 356, 427, 242, 456, 811, 422, 541, 5, 0],
pointStart: 1430073516000,
pointInterval: 60000
}
]
});
JSFIDLE:解决方案是在xAxis对象中添加了以下函数
tickPositioner() {
let tickPositions = this.tickPositions;
tickPositions[0] = this.dataMin;
tickPositions[tickPositions.length - 1] = this.dataMax;
return tickPositions;
}
如果你想要答案,你至少需要分享你的系列数据。最好添加一个带有当前图形的JSFIDLE.jsFIDLE。您不能在同一轴上设置一些刻度,并让图表自动生成其他刻度。您可以尝试两件事:1)创建第二个
xAxis
,其中仅指定这两个刻度(您需要调整偏移、隐藏直线等);2)向图表添加两条绘图线,并使用它们的标签来实现您的目标。否则,您可以使用tickPositioner()
函数在单个轴上适当设置所有刻度。除了jlbriggs注释外,您还可以在这里找到如何使用tickPositioner获取xAxis标签的简单示例:非常感谢你们,它可以工作:-)