【发布时间】：2016-05-14 01:07:29
【问题描述】：
在 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> </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;
}
【问题讨论】：
标签： javascript highcharts