在范围选择器更改上更改刻度间隔
Highstock Change tick interval on range selector change
我无法获得tickinterval更新在以下jsp: 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()
}
}
}
},
不工作
例如,滴答间隔可以设置为每45分钟一次点击'2hour' ?
您可以使用tickPositioner函数在设置极值后更改tick位置。您可以使用axis .update()来更新这个轴的tickPositions:
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/
你应该能够改变你的tickPositions在不同的范围。
问好。
可以,但如果文本显示为"2小时"而实际时间为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
}
这里是它的现场演示
也许这可以帮助某人,我更新了现有的提琴;-)
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)
}
}
}
}
}
相关文章:
- 正在更新起始日期角度日期范围选择器中的日期选择
- 如何从日期范围选择器中获取两个日期
- 从GWT中的HighCharts库(以及一般的Javascript)自定义Stockchart范围选择器按钮
- 正在将日期范围选择器转换为角度指令
- 将Highcharts StockChart范围选择器的大小调整为小于6个数据点
- 日期范围选择器,然后再次单击同一项目
- 带有 html 网站中 SQL 数据的范围选择器的高图表
- 为什么高库存范围选择器中有禁用的按钮
- 从 mysql 获取行集,并使用 php 和 Codeigniter 中的 jquery 生成动态范围选择器框
- jqGrid FilterToolbar,主要带有工作日期范围选择器
- 如何将日期范围选择器中选择的日期范围传递给变量或返回到 javascript 中的输入文本框
- 流星:如何让 JS 日期范围选择器调整 API 调用日期参数
- 更新 Twitter 引导程序的日期范围选择器的选定日期
- 如何在同一页面上使用两个引导日期范围选择器
- 使用jQuery添加日期范围选择器并更新内容
- 如何在React日期范围选择器中获取开始和结束日期值
- 为什么我的范围选择器在我的谷歌地图API3/jQuery移动应用程序中不起作用
- rails应用程序中日期范围选择器的国际化
- 带数据表的日期范围选择器-can't搜索未来日期
- jQuery UI日期选择器范围选择器问题