Question

我是Highcharts的新手。

我有折线图。以下是类别：

 ["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/

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

我想在缩放窗口中只得到那些Y值的总和，而不是整个数据系列的总和。为此，我需要捕获缩放窗口中x轴中包含的值。所以我根据我的研究添加了以下内容：

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

但是，event.min或event.max的值是数字，例如3.6552511415525117,7.10730593607306。我无法知道缩放窗口中包含哪些x值。如何找到包含哪些x值？有没有办法得到开始和结束的x值？

谢谢！

Answer 1

我做了进一步的研究。我注意到我可能已经在我的问题中回答了我的问题。事实证明，我在问题中提供的数字非常有用，而且毫无头绪。 Math.ceil（min）和Math.floor（max）只是数据系列中数据点的开始和结束索引，它们显示在缩放窗口中。另一件需要注意的事情是使用afterSetExtremes事件。这是图表最终确定X轴的起点和终点的时刻。所以完整的答案是：

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

我是Highcharts的新手，如果我错了，我很乐意纠正。

干杯。

Answer 2

这可能会对你有所帮助。试试这个小提琴：http://jsfiddle.net/7kv9a25r/。

    chart: {
        events: {
            selection: function (event) {
                var text,
                    label;
                if (event.xAxis) {
                    text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
                } else {
                    text = 'Selection reset';
                }
                label = this.renderer.label(text, 100, 120)
                    .attr({
                        fill: Highcharts.getOptions().colors[0],
                        padding: 10,
                        r: 5,
                        zIndex: 8
                    })
                    .css({
                        color: '#FFFFFF'
                    })
                    .add();

                setTimeout(function () {
                    label.fadeOut();
                }, 1000);
            }
        },
        zoomType: 'x'
    },

Highcharts：如何在缩放窗口中获取数据点？

2 个答案: