我无法在以下Jsfiddle中更新tickinterval:https://jsfiddle.net/rarwarrar/5xgoqjst/4/
目前:
xAxis: {
events: {
setExtremes: function(e) {
if (e.rangeSelectorButton.text === "2Hour") {
$('#chart').highcharts().xAxis[0].tickInterval= 2700000 //45 min
$('#chart').highcharts().redraw()
}
}
}
},
不工作。
例如,点击“2小时”后,每隔45分钟可以设置一个滴答间隔吗?
答案 0 :(得分:3)
设置极值后,您可以使用tickPositioner函数更改刻度线位置。您可以使用Axis.update()更新此轴的tickPosition:
setExtremes: function(e) {
if (e.rangeSelectorButton.text === "2Hour") {
this.update({
tickPositioner: function() {
var positions = [],
info = this.tickPositions.info;
for (var x = this.dataMin; x <= this.dataMax; x += 45 * 60 * 1000) {
positions.push(x);
};
positions.info = info;
return positions;
}
}, false)
}
}
在这里你可以看到一个如何工作的例子: https://jsfiddle.net/5xgoqjst/5/
您也应该能够在不同的范围内更改tickPosition。
最好的问候。
答案 1 :(得分:1)
你可以,但是阅读文字会很困惑&#34; 2小时&#34;但实际时间是45分钟。为什么不为此添加新按钮?为了显示这一点,需要最少的点数,但您可以使用allButtonsEnabled
覆盖。以下是rangeSelector
的外观:
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'hour',
count: 2,
text: '2Hour'
}, {
type: 'hour',
count: 5,
text: 'Week'
}, {
type: 'day',
count: 1,
text: '2Weeks'
}, {
type: 'minute',
count: 45,
text: '45 minutes'
}],
selected: 1,
inputEnabled: false,
buttonPosition: {
x: 340
},
buttonSpacing: 10
}
这是一个实时的demo。
答案 2 :(得分:1)
也许这可以帮助某人,我更新了现有的Fiddle; - )
xAxis: {
events: {
setExtremes: function(e) {
if (typeof(e.rangeSelectorButton) !== 'undefined') {
// alert('count: ' + e.rangeSelectorButton.count + 'text: ' + e.rangeSelectorButton.text + ' type: ' + e.rangeSelectorButton.type);
if (e.rangeSelectorButton.type === "week") {
this.update({
tickInterval: 86400000, //1000*60*60*24 = 1 day
minorTickInterval: 86400000
}, false)
}
}
}
}
}
然后你必须适应你的情况。