动态更改标签以显示 y 轴最小值和最大值答案

【问题标题】：dynamically change label to show the y-axis min and max value动态更改标签以显示 y 轴最小值和最大值
【发布时间】：2014-07-03 12:01:53
【问题描述】：

我想使用按钮获取 y 轴最小值和最大值标签。当我选择不同的图表来显示时，它应该更新标签。现在，如果我单击获取标签按钮并显示正确的极值标签，但如果我继续单击范围按钮或输入范围框，它将不会自动更新标签。如何解决这个问题？谢谢这是jsfiddle链接JS

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>

我的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);
    });
    });

});

【问题讨论】：

标签： javascript jquery highcharts highstock

【解决方案1】：

使用chart redraw event。

让你的标签添加功能：

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();
}

然后在事件中，如果之前添加了标签，请更新它：

        chart: {
             events: {
                 redraw: function() {
                     var oL = $('#myLabel');
                     if (oL.length){
                         oL.remove();
                         addLabel();
                     }
                 }
             }
         },

这是更新后的fiddle。

【讨论】：