Creating highstock zoom-in/out button

问题

I have the following problem - I'm trying to create highstock graphic with zoom-in/zoom-out buttons, but something is wrong with the zooming. When i press the button most of the times the chart zooms to the correct time interval, however, after I press the button a couple more times, the chart starts to behave weird - the animations aren't correct or it doesn't zoom or it zooms to the wrong interval.

This is the zooming function:

var xAxis = graphic.xAxis[0];
var minimum = xAxis.dataMin;
var maximum = xAxis.dataMax;

var newMin = 0;
var newMax = 0;

//when zooming out

newMin = xAxis.min - 360000;
newMax = xAxis.max + 360000;

//when zooming in

//newMin = xAxis.min - 360000;
//newMax = xAxis.max + 360000;

if (newMin < minimum)
    newMin = minimum;

if (newMax > maximum)
    newMax = maximum;

if (newMin > newMax) {
    alert("min bigger than max");
}

console.log("newMin: " + newMin + "    newMax: " + newMax);

xAxis.setExtremes(newMin, newMax);

Here's a fiddle: http://jsfiddle.net/E5kth/3/

jquery - 1.6.4
jquery mousewheel - 3.1.6
highstock - 1.3.7

Thanks in advance ;]

EDIT: Here is a NEW video with better explanations of the problem: https://www.dropbox.com/s/5x1k5b0lbtqw81u/highstock_ordinal-false_bug_converted.avi for better quality - download the video, dropbox streaming is with low quality.

回答1:

I prepared simple example how it should be done, http://jsfiddle.net/3vB5B/. It get range from chart and then reduce range on 24 hours.

$('#btn').click(function(){

            var min = chart.xAxis[0].getExtremes().min,
                max = chart.xAxis[0].getExtremes().max;

            chart.xAxis[0].setExtremes((min + 12 * 3600 * 1000),(max - 12 * 3600 * 1000)); //12 hrs on min and 12hrs on max, summarised it is one day.

});

来源：https://stackoverflow.com/questions/21024723/creating-highstock-zoom-in-out-button

标签

Highcharts

highstock