【问题标题】:Creating highstock zoom-in/out button创建 highstock 放大/缩小按钮
【发布时间】:2014-01-30 17:39:34
【问题描述】:

我有以下问题 - 我正在尝试使用放大/缩小按钮创建 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 鼠标滚轮 - 3.1.6
  • highstock - 1.3.7

提前致谢;]

编辑: 这是一个对问题有更好解释的新视频:https://www.dropbox.com/s/5x1k5b0lbtqw81u/highstock_ordinal-false_bug_converted.avi 为获得更好的质量 - 下载视频,Dropbox 流的质量较低。

【问题讨论】:

  • 尝试禁用动画,否则运行动画没有完成,你会设置新的、错误的、极端:jsfiddle.net/E5kth/4(第一个按钮)
  • 好的,我在禁用动画的情况下尝试了它,但我没有看到任何变化。同样在您提供的小提琴中,它仍然存在问题。
  • 不,它不是,它完全按预期工作(至少对我来说)。我建议你尝试禁用序数轴的图表:jsfiddle.net/E5kth/5 - 你有很大的差距,所以有一段时间你试图放大,但有一个差距。
  • 用你的最后一个小提琴 (5) 这就是你重现错误的方式: - 打开小提琴 - 放大到第一个可见栏(通过用鼠标选择它) - 单击放大按钮 2或 3 次,直到图形变得比视口更宽并且看不到任何间隙。在看到“最小/最大”警报之前是否放大都没关系。 - 单击缩小按钮 2 或 3 次,它被窃听了 - 只有日期在移动,图形静止。
  • 你说得对,我们有巨大的差距,这正是我们需要使用 ordinal:true 的原因。将序数设置为 false 会使图形无用。

标签: highcharts highstock


【解决方案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.

});

【讨论】:

  • 我更新了缩放功能以使用您的代码,但它仍然无法正常工作,可能是因为图形中的间隔 - jsfiddle.net/E5kth/7 。你的数据没有区间,你知道区间是否需要一些特定的代码吗?
猜你喜欢
  • 2017-12-05
  • 1970-01-01
  • 1970-01-01
  • 2022-10-17
  • 1970-01-01
  • 1970-01-01
  • 2015-11-28
  • 2018-08-26
  • 1970-01-01
相关资源
最近更新 更多