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

dynamically change label to show the y-axis min and max value

本文关键字：最小值 最大值 显示 标签 动态      更新时间：2023-09-26

我想使用按钮获得y轴最小值和最大值标签。当我选择不同的图表显示时，它应该更新标签。现在如果我点击get标签按钮，它会显示正确的极值标签，但是如果我继续点击范围按钮或输入范围框，它不会自动更新标签。如何解决这个问题?谢谢这里是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>

my js code:

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

使用图表重绘事件

将标签添加为函数:

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

相关文章：