如何在Highstock中为Navigator设置最小变焦(36个月)? 我试过这个,但它不起作用你有想法吗?
$(function() {
var chart;
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
xAxis: {
minRange:6 * 30 * 24 * 3600 * 1000,
events: {
afterSetExtremes: function(e) {
var maxDistance = 10 * 30 * 24 * 3600 * 1000; //8 months time
var xaxis = this;
if ((e.max - e.min) < maxDistance) {
var min = e.max - maxDistance;
var max = e.max;
window.setTimeout(function() {
xaxis.setExtremes(min, max);
}, 1);
}
}
}
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}}]
});
});
});
答案 0 :(得分:1)
如果您需要范围选择器
,则需要配置buttonsxAxis: {
events: {
afterSetExtremes: function(e) {
var minDistance = 36 * 30 * 24 * 3600 * 1000; //36 months time
var xaxis = this;
if ((e.max - e.min) < minDistance) {
var min = e.max - minDistance;
var max = e.max;
window.setTimeout(function() {
xaxis.setExtremes(min, max);
}, 1);
}
}
}
}
rangeSelector: {
selected : 1,
buttons: [{
type: 'month',
count: 36,
text: '36m'
}, {
type: 'month',
count: 42,
text: '42m'
}, {
type: 'month',
count: 48,
text: '48m'
}, {
type: 'month',
count: 54,
text: '54m'
}, {
type: 'all',
text: 'All'
}]
}
工作jsFiddle:http://jsfiddle.net/Zd5Cn/
答案 1 :(得分:0)
从1.3.6开始,minRange属性不再适用于导航器。 (在1.3.5中它起作用)。 我建议你禁用实时重绘以避免导航器的“跳跃”。
scrollbar: {
enabled: true,
liveRedraw: false
},
如果您不想禁用它,则必须调用xAxis.setExtremes两次(将其添加到window.setTimeout之前的行)
xAxis: {
type: 'datetime',
minRange: 36 * 30 * 24 * 3600 * 1000,
events: {
afterSetExtremes: function (e) {
var extremes, xAxis;
if (e.trigger === 'navigator') {
extremes = getDateExtremes(e.min, e.max, e.dataMax);
xAxis = this;
window.setTimeout(function () {
xAxis.setExtremes(extremes.min, extrems.max);
}, 1);
}
}
},
以下是我们使用的辅助方法。
function padNumber(n) {
return n <= 9 ? '0' + n : n;
}
function getDateExtremes(begin, end, max) {
var minDistance = 36 * 30 * 24 * 3600 * 1000,
curMin, curMax, curMinDate, curMaxDate;
if ((end - begin) < minDistance) {
if ((begin + minDistance) <= max) {
curMin = begin;
curMax = begin + minDistance;
} else {
curMin = end - minDistance;
curMax = end;
}
} else {
curMin = begin;
curMax = end;
}
curMinDate = new Date(curMin);
curMaxDate = new Date(curMax);
return {
min: curMin,
max: curMax,
minDateId: curMinDate.getFullYear() + '-' + padNumber(curMinDate.getMonth() + 1) + '-' + padNumber(curMinDate.getDate()),
maxDateId: curMaxDate.getFullYear() + '-' + padNumber(curMaxDate.getMonth() + 1) + '-' + padNumber(curMaxDate.getDate())
};
}
希望它可以帮到你。