Highstock – 最小缩放

如何在Highstock中为Navigator设置最小变焦（36个月）？ 我试过这个，但它不起作用你有想法吗？

http://jsfiddle.net/B7vCR/6/

$(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 }}] }); }); }); 

Answer 1

如果需要范围选择器，则需要配置按钮

 xAxis: { 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/

Answer 2

从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()) }; } 

希望它能帮到你。