Javascript 如何在海图中获得y轴的极限值？

在Highcharts中，我可以使用xAxis事件获取当前视图的极值（x轴边界），但如何获取这些边界处每个系列的Y轴值

    xAxis: {
      events: {
        setExtremes: function (e) {

          $('#report').html(
            '<b>The new time interval is: (' +
              Highcharts.dateFormat("%m/%d/%Y", e.min) +
            ', ' + 
              Highcharts.dateFormat("%m/%d/%Y", e.max) +
              ').</b><br />The values at those boundaries are: <b>(Y1, Y2)</b>.'
          );

        }
      }
    },

---

更新：根据评论：

var data = e.target.series[0].processedYData; // Get the y-axis data.
var dataMin = data[0]; // The first value.
var dataMax = data[data.length-1]; // The last value.

$（函数（）{
$（“#容器”）.highcharts（'StockChart'{
xAxis：{
活动：{
设置极端值：函数（e）{
//警报（'新的时间间隔为：min:'+
//dateFormat（“%m/%d/%Y”，e.max））；
var data=e.target.series[0]。processedYData；
var dataMin=数据[0]；
var dataMax=data[data.length-1]；
$（“#报告”）.html(
'新的时间间隔为：（'+
Highcharts.dateFormat（“%m/%d/%Y”，e.min）+
', ' +
Highcharts.dateFormat（“%m/%d/%Y”，e.max）+
“）。
这些边界处的值为：（“+dataMin+”、“+dataMax+”）；
}
}
},
范围选择器：{
选定：1
},
系列：[{
名称：“MSFT”，
资料来源：MSFT
}]
});
});
我在上一次单击中看到了Y值，因为我使用了setextrems事件来形成我的HTML。还有另一个名为“Extremes后的事件”的事件专门用于此目的

更新的JavaScript代码：

$(function () {

  function create_new_legend(e) {

    var html = `
<table id="new-legend">
  <tr>
    <th>&nbsp;</th>
    <th class="price">Start</th>
    <th class="price">End</th>
    <th class="price">Change</th>
  </tr>
`;

    for (var i = 0; i < e.target.series.length; ++i) {
      var series_name = e.target.series[i].name;

      // Skip over the navigator.
      if (series_name.toLowerCase().trim() ==
          "Navigator".toLowerCase().trim())
      {
        continue;
      }

      var series_min_date = e.target.series[i].processedXData[0];
      var series_max_date = e.target.series[i].processedXData[
        e.target.series[i].processedXData.length - 1];

      var series_processed_y_data = e.target.series[i].processedYData;
      var series_min_y_data = series_processed_y_data[0].toFixed(2);
      var series_max_y_data = series_processed_y_data[
        series_processed_y_data.length - 1].toFixed(2);

      var series_data_change = ((series_max_y_data - series_min_y_data)/(series_min_y_data) * 100).toFixed(2);

      var series_css_class = (series_data_change > 0)
        ? 'pos' : ((series_data_change == 0)
                    ? 'zero' : 'neg');

      html += `
  <tr>
    <td class="stock">` + series_name + `</td>
    <td class="price">` + series_min_y_data + `</td>
    <td class="price">` + series_max_y_data + `</td>
    <td class="price"><span class="` + series_css_class + '">' + series_data_change + `%</td>
  </tr>
`;
    } // end iterate through each series

    html += `
</table>
`;
    $('#div-new-legend').html(html);

  } // end function create_new_legend(e)

  $('#container').highcharts('StockChart', {

    chart: {
      renderTo: 'container',
      events: {
        load: create_new_legend
      }
    },

    legend: {
      enabled: true,
      align: 'right',
      verticalAlign: 'middle',
      layout: 'vertical',
      width: 200,
      borderColor: 'black',
      borderWidth: 0.5
    },

    xAxis: {
      events: {
        afterSetExtremes: create_new_legend
      }
    },

    rangeSelector: {
        selected: 1
    },

    series: [{
        name: 'Microsoft',
        data: MSFT
    }, {
        name: 'Adobe',
        data: ADBE
    }, {
        name: 'Google',
        data: GOOGL
    }]
  });
});

不幸的是，这似乎并不正确。例如，如果我调整其大小，使x轴最小数据点为2015年5月7日，则dataMin点读数为46.14，但该日期的实际MSFT股价数据点为47.75。它们不应该是相同的吗？不一定是鼠标悬停时读取的MSFT值。你必须看到可见范围的最小值和最大值。我认为这不是他想要的。yAxis.getextrems将为您提供数据集中的最大和最小y值，而OP希望找出与xAxis.getextrems.Rahul Sharma对应的y值是正确的。这正是我想要的。@snrub先生，这也不是真的。我试过了，但并不总是这样。问题是，我认为，processedYData似乎具有绘制在图形上的点，但在某些情况下，极值无法悬停，因为它们太接近边缘。为了测试它们并不总是关闭一个元素，更改范围的左边界，保持右边界不变。您有JSFIDLE版本吗？我自己做的。也许有人可以使用它：）
.pos {
  color: green;
}
.neg {
  color: red;
}

#new-legend-header {
  background-color: #e7f0f9;
  font-weight: bold;
  font-size: 100%;
  text-align: center;
  padding: 0.5em;
  width: 300px;
  margin-bottom: 0;
}
#new-legend {
  margin-top: 0.5em;
  background-color: #FFFFFF;
  border-collapse: collapse;  
  width: 300px;
  font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
  font-size: 12px;
  line-height: normal;
}
#new-legend th,
#new-legend td {
  padding: 0;
}

#new-legend td.stock {
  text-align: left;
  padding-left: 0.5em;
}
#new-legend td {
  text-align: right;
}

var data = e.target.series[0].processedYData; // Get the y-axis data.
var dataMin = data[0]; // The first value.
var dataMax = data[data.length-1]; // The last value.

$(function () {

  function create_new_legend(e) {

    var html = `
<table id="new-legend">
  <tr>
    <th>&nbsp;</th>
    <th class="price">Start</th>
    <th class="price">End</th>
    <th class="price">Change</th>
  </tr>
`;

    for (var i = 0; i < e.target.series.length; ++i) {
      var series_name = e.target.series[i].name;

      // Skip over the navigator.
      if (series_name.toLowerCase().trim() ==
          "Navigator".toLowerCase().trim())
      {
        continue;
      }

      var series_min_date = e.target.series[i].processedXData[0];
      var series_max_date = e.target.series[i].processedXData[
        e.target.series[i].processedXData.length - 1];

      var series_processed_y_data = e.target.series[i].processedYData;
      var series_min_y_data = series_processed_y_data[0].toFixed(2);
      var series_max_y_data = series_processed_y_data[
        series_processed_y_data.length - 1].toFixed(2);

      var series_data_change = ((series_max_y_data - series_min_y_data)/(series_min_y_data) * 100).toFixed(2);

      var series_css_class = (series_data_change > 0)
        ? 'pos' : ((series_data_change == 0)
                    ? 'zero' : 'neg');

      html += `
  <tr>
    <td class="stock">` + series_name + `</td>
    <td class="price">` + series_min_y_data + `</td>
    <td class="price">` + series_max_y_data + `</td>
    <td class="price"><span class="` + series_css_class + '">' + series_data_change + `%</td>
  </tr>
`;
    } // end iterate through each series

    html += `
</table>
`;
    $('#div-new-legend').html(html);

  } // end function create_new_legend(e)

  $('#container').highcharts('StockChart', {

    chart: {
      renderTo: 'container',
      events: {
        load: create_new_legend
      }
    },

    legend: {
      enabled: true,
      align: 'right',
      verticalAlign: 'middle',
      layout: 'vertical',
      width: 200,
      borderColor: 'black',
      borderWidth: 0.5
    },

    xAxis: {
      events: {
        afterSetExtremes: create_new_legend
      }
    },

    rangeSelector: {
        selected: 1
    },

    series: [{
        name: 'Microsoft',
        data: MSFT
    }, {
        name: 'Adobe',
        data: ADBE
    }, {
        name: 'Google',
        data: GOOGL
    }]
  });
});

.pos {
  color: green;
}
.neg {
  color: red;
}
.zero {
  color: black;
}

#new-legend {
  margin-top: 0.5em;
  background-color: #FFFFFF;
  border-collapse: collapse;  
  width: 300px;
  font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
  font-size: 12px;
  line-height: normal;
}
#new-legend th,
#new-legend td {
  padding: 0;
}

#new-legend td.stock {
  text-align: left;
  padding-left: 0.5em;
}
.price {
  text-align: right;
}