2
在Highcharts中，我可以使用xAxis事件来获取当前视图的极值（x轴边界），但是如何获得每个序列在这些边界处的Y轴值？如何获得HighCharts中极端的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;
}
你有一个jsfiddle版本吗？ –
自己做了。也许有人可以使用它:) http://jsfiddle.net/Lejq5crL/ –