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

时间：2016-05-14 01:07:29

标签： javascript highcharts

在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>.'
          );

        }
      }
    },

以下是我想要的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;
}

2 个答案:

答案 0 :(得分：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;
}

答案 1 :(得分：0)

更新：根据评论：

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() {
  $('#container').highcharts('StockChart', {

    xAxis: {
      events: {
        setExtremes: function(e) {
          // alert('The new time interval is: min: ' + 
          //   Highcharts.dateFormat("%m/%d/%Y", e.max));


          var data = e.target.series[0].processedYData;
          var dataMin = data[0];
          var dataMax = data[data.length - 1];



          $('#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>(' + dataMin + ', ' + dataMax + ')</b>.');

        }
      }
    },

    rangeSelector: {
      selected: 1
    },

    series: [{
      name: 'MSFT',
      data: MSFT
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>
<div id="report" 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>

enter image description here

相关问题
最新问题