javascript - highChart图表中拖动缩放后如何获取图表最小值和最大值?

标签 javascript charts highcharts

http://jsfiddle.net/leongaban/0zuxtdcg/

我在 HighChart 文档中找不到“拖动缩放”类型事件,该事件会告诉我用户已完成缩放到图表上的特定范围,然后给我新的最小值和最大值。

$(function () {
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {

      $('#container').highcharts({
          chart: {
              zoomType: 'x'
          },
          title: {
              text: 'USD to EUR exchange rate over time'
          },
          subtitle: {
              text: document.ontouchstart === undefined ?
                      'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
          },
          xAxis: {
              type: 'datetime'
          },
          yAxis: {
              title: {
                  text: 'Exchange rate'
              }
          },
          legend: {
              enabled: false
          },
          plotOptions: {
              area: {
                  fillColor: {
                      linearGradient: {
                          x1: 0,
                          y1: 0,
                          x2: 0,
                          y2: 1
                      },
                      stops: [
                          [0, Highcharts.getOptions().colors[0]],
                          [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                      ]
                  },
                  marker: {
                      radius: 2
                  },
                  lineWidth: 1,
                  states: {
                      hover: {
                          lineWidth: 1
                      }
                  },
                  threshold: null
              }
          },

          series: [{
              type: 'area',
              name: 'USD to EUR',
              data: data
          }]
      });
  });
});

最佳答案

缩放会影响轴的极值。您可以使用 setExtremesafterSetExtremes轴的事件来捕捉这个。

例如( JSFiddle ):

xAxis: {
    events: {
        setExtremes: function(e) {
            alert("Min: "+e.min+"\n"
                    +"Max: "+e.max);
        }
    }
}

e 对象包含最小值和最大值,而函数中的 this 是 Axis 对象(也具有最小值和最大值)。 API 中将两个事件之间的细微差别描述为:

afterSetExtremes ... As opposed to the setExtremes event, this event fires after the final min and max values are computed and corrected for minRange.

关于javascript - highChart图表中拖动缩放后如何获取图表最小值和最大值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36990670/

相关文章:

javascript - React Native 后台服务器启动报错

javascript - 如何在 HTML 中嵌入 XML 文件?

javascript - Google 图表的访问限制

javascript - 将 javascript 变量作为 hightcharts 系列数据传递时,Highcharts 不起作用

javascript - ASP.NET 和 Javascript 链接和事件顺序

java - 如何使用java从Excel工作表中读取图表?

javascript - 我可以在 ZingChart 中通过单个 renderfunction 调用来渲染多个图表吗?

php - 使用 PHP MySQL 在 HTML 表中定义的 HighCharts 数据

php - 如何使用 json_encode

javascript - Reactjs 类与 javascript 类