javascript - 如何在 HighCharts 中获得极端的 y 轴值？

Question

在 Highcharts 中，我可以使用 xAxis 事件获取当前 View 的极值(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>.'
          );

        }
      }
    },

这是我想要的 jsFiddle 的链接:https://jsfiddle.net/MrSnrub/eex337m8

当您使用 rangeSelector 调整大小时，您将获得不同的日期。我想获得那些日期的最小值和最大值。我该怎么做？

更新:我被要求提供更新后的代码，这里是:

HTML:

<div id="container" style="height: 400px; min-width: 600px"></div>
<div id="div-new-legend" style="font: 0.8em sans-serif">
</div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/three-series-1000-points.js"></script>

JavaScript:

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

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

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

            // Highcharts is starting the processedYdata one element
            // early, so we'll grab the first element to be the 
            // start date's Y-axis min data, not the zeroth
            // element. (max_date looks OK.)
            var msft_data = e.target.series[0].processedYData;
            var msft_min = msft_data[1];
            var msft_max = msft_data[msft_data.length - 1];
            var msft_change = ((msft_max - msft_min)/(msft_min) * 100).toFixed(2);
            var span_msft_change = (msft_change > 0) 
              ? ('<span class="pos">' + msft_change + '%</span>') 
              : ('<span class="neg">' + msft_change + '%</span>'); 

            var adbe_data = e.target.series[1].processedYData;
            var adbe_min = adbe_data[1];
            var adbe_max = adbe_data[adbe_data.length -1];
            var adbe_change = ((adbe_max - adbe_min)/(adbe_min) * 100).toFixed(2);
            var span_adbe_change = (adbe_change > 0) 
              ? ('<span class="pos">' + adbe_change + '%</span>') 
              : ('<span class="neg">' + adbe_change + '%</span>'); 

            var googl_data = e.target.series[2].processedYData;
            var googl_min = googl_data[1];
            var googl_max = googl_data[googl_data.length -1];
            var googl_change = ((googl_max - googl_min)/(googl_min) * 100).toFixed(2);
            var span_googl_change = (googl_change > 0) 
              ? ('<span class="pos">' + googl_change + '%</span>') 
              : ('<span class="neg">' + googl_change + '%</span>'); 

            $('#div-new-legend').html(

'<table id="new-legend">' +
'  <tr>' +
'    <th>&nbsp;</th>' +
'    <th>Start</th>' +
'    <th>End</th>' +
'    <th>Change</th>' +
'  </tr>' +
'  <tr>' +
'    <td class="stock">' + e.target.series[0].name + '</td>' +
'    <td>' + msft_min + '</td>' +
'    <td>' + msft_max + '</td>' +
'    <td>' + span_msft_change + '</td>' +
'  </tr>' +
'  <tr>' +
'    <td class="stock">' + e.target.series[1].name + '</td>' +
'    <td>' + adbe_min + '</td>' +
'    <td>' + adbe_max + '</td>' +
'    <td>' + span_adbe_change + '</td>' +
'  </tr>' +
'  <tr>' +
'    <td class="stock">' + e.target.series[2].name + '</td>' +
'    <td>' + googl_min + '</td>' +
'    <td>' + googl_max + '</td>' +
'    <td>' + span_googl_change + '</td>' +
'  </tr>' +
'</table>'
          );
        }
      }
    },

    rangeSelector: {
      selected: 1
    },

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

CSS:

.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;
}

Answer 1

我在上一次点击时看到了 Y 值，因为我使用 setExtremes 事件来形成我的 HTML。还有另一个名为 afterSetExtremes 的事件专门用于此目的。

更新的 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
    }]
  });
});

更新的 CSS 代码:

.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;
}