Highcharts:如何在缩放窗口中获取数据点? [英] Highcharts: how to get the data points in the zoomed window?

问题描述

我是Highcharts的新手.

I am new to Highcharts.

我有一个折线图.这是类别:

I have a line chart. Here is the categories:

 ["9/7/14", "9/8/14", "9/9/14", "9/10/14", "9/11/14", "9/12/14", "9/13/14", "9/14/14", "9/15/14", "9/16/14", "9/17/14", "9/18/14", "9/19/14", "9/20/14", ...]

以下是数据系列:

[1, 4, 0, 2, 1, 1, 1, 5, 3, 1, 0, 0, 6, 8, ... ]

我向图表添加了缩放，非常类似于此jsfiddle演示: http://jsfiddle.net/348sh/3/

I added zoom to my chart, very similar to this jsfiddle demo: http://jsfiddle.net/348sh/3/

chart: {
        renderTo: 'container', 
        zoomType: 'x'
},

我只想获取放大窗口内那些Y值的总和，而不是整个数据系列的总和.为此，我需要捕获缩放窗口的x轴中包含哪些值.因此，我根据自己的研究添加了以下内容:

I would like to get the total of only those Y values within the zoomed-in window, not the total of the entire data series. For this, I need to capture what values are included in the x axis in the zoomed window. So I added the following based on my research:

xAxis: {
  type: 'line',
  events: {
    setExtremes: function(event) {
          console.log(event.min);
          console.log(event.max);
      }
  }
}

但是，event.min或event.max的值是数字，例如3.6552511415525117、7.1073050593607306.我无法知道缩放窗口中包含哪些x值.如何找到包含哪些x值?有什么方法可以获取x的开始和结束值?

However, the values for event.min or event.max are numbers such as 3.6552511415525117, 7.10730593607306. I have no way to know which x values are included in the zoomed window. How can I find which x values are included? Any way to get the start and end x values ?

谢谢！

推荐答案

我做了进一步的研究.我注意到我可能已经在问题中回答了我的问题.事实证明，我在问题中给出的数字非常有帮助，并非毫无道理. Math.ceil(min)和Math.floor(max)只是显示在缩放窗口中的数据系列中数据点的开始和结束索引.要注意的另一件事是使用afterSetExtremes事件.这是图表最终确定X轴上的起点和终点的时刻.因此，完整的答案是:

I did further research. I notice that I may have answered my question already in my question. It turns out that the numbers I gave in my question are very helpful, not clueless. Math.ceil(min) and Math.floor(max) are just the beginning and ending index of the data points in the data series that are show up in the zoomed window. The another thing to note is to use afterSetExtremes event. This is the moment where chart finalizes the starting and ending points in the X axis. So the complete answer is:

xAxis: {
  type: 'line',
  events: {
    afterSetExtremes: function(event) {
          var start = Math.ceil(event.min);
          var end = Math.floor(event.max);
      }
  }
}

我是Highcharts的新手，如果我做错了，我希望得到纠正.

I am new to Highcharts and love to get corrected if I am wrong.

干杯.

这篇关于Highcharts:如何在缩放窗口中获取数据点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！