[英]dynamically change label to show the y-axis min and max value
I want to get y-axis min and max value label using button. 我想使用按钮获取y轴的最小值和最大值标签。 And it should update the label when I choose different chart to display. 当我选择要显示的其他图表时,它应该更新标签。 Now if I click the get label button and it show the correct extreme value label, but if I go on to click the range button or input range box, it will not auto update the label. 现在,如果我单击获取标签按钮,并且显示正确的极值标签,但是如果我继续单击范围按钮或输入范围框,它将不会自动更新标签。 How to fix this? 如何解决这个问题? thanks here is the jsfiddle link JS 谢谢这里是jsfiddle链接JS
html code: html代码:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<button id="button">Get Y axis extremes</button>
my js code: 我的js代码:
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
// the button action
$('#button').click(function() {
var chart = $('#container').highcharts(),
extremes = chart.yAxis[0].getExtremes();
chart.renderer.label(
'dataMax: '+ extremes.dataMax +'<br/>'+
'dataMin: '+ extremes.dataMin +'<br/>'+
'max: '+ extremes.max +'<br/>'+
'min: '+ extremes.min +'<br/>',
100,
100
)
.attr({
fill: '#FCFFC5',
zIndex: 8
})
.add();
//$(this).attr('disabled', true);
});
});
});
Use the chart redraw event . 使用图表重绘事件 。
Make your label addition a function: 使标签添加功能:
function addLabel(){
var chart = $('#container').highcharts(),
extremes = chart.yAxis[0].getExtremes();
chart.renderer.label(
'dataMax: '+ extremes.dataMax +'<br/>'+
'dataMin: '+ extremes.dataMin +'<br/>'+
'max: '+ extremes.max +'<br/>'+
'min: '+ extremes.min +'<br/>',
100,
100
)
.attr({
fill: '#FCFFC5',
zIndex: 8,
id :'myLabel'
})
.add();
}
Then in the event, if the label's been previously added update it: 然后,如果事件是先前添加的标签,则对其进行更新:
chart: {
events: {
redraw: function() {
var oL = $('#myLabel');
if (oL.length){
oL.remove();
addLabel();
}
}
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.