创建高速放大/缩小按钮

时间:2014-01-09 15:45:50

标签: highcharts highstock

我有以下问题 - 我正在尝试使用放大/缩小按钮创建高品质图形,但缩放有问题。当我大多数时间按下按钮时,图表会缩放到正确的时间间隔,但是,在我再按几次按钮后,图表开始表现得很奇怪 - 动画不正确或者没有缩放或者它缩放到错误的间隔。

这是缩放功能:

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);                       

这是一个小提琴:http://jsfiddle.net/E5kth/3/

  • jquery - 1.6.4
  • jquery mousewheel - 3.1.6
  • highstock - 1.3.7

提前致谢;]

修改 这是一个新视频,可以更好地解释问题:https://www.dropbox.com/s/5x1k5b0lbtqw81u/highstock_ordinal-false_bug_converted.avi 为了更好的质量 - 下载视频,Dropbox流媒体质量低。

1 个答案:

答案 0 :(得分:1)

我准备了一个简单的例子,它应该如何完成,http://jsfiddle.net/3vB5B/。它从图表中获取范围,然后在24小时内缩小范围。

$('#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.

});