如何使用Highchart自动计算的最小值和最大值,除非它们高于或低于预定义的最小值和最大值

How to use Highchart auto calculated min and max values, unless they are above or below a predefined min and max

本文关键字:最小值 最大值 高于 预定义 计算 Highchart 何使用      更新时间:2023-09-26

我正在寻找一种方法来使用Highcharts自动计算的最小值和最大值,除非它们高于或低于预定义的最小值和最大值。例如,如果我的数据集永远不会低于零,使用自动计算的最小值,除非它自动计算到负数。如果我将最小值设置为0,图表总是从0开始(我失去了自动调整功能)。

我发现这个问题是类似的,我如何设置一个坐标轴的最小上限在Highcharts?

这就是我所实现的,它完美地用于加载事件。当我打开和关闭图例系列时,如何添加相同的逻辑?切换序列后,图表自动调整回负数。

http://jsfiddle.net/min123/9JHPn/

 var chart = new Highcharts.Chart({
    chart: {
        renderTo: "container",
        zoomType: 'xy',
        type: 'line'
    },
    title: {
        text: 'Line Chart'
    },
    xAxis: {
        categories: [2008, 2009, 2010, 2011, 2012],
        labels: {
            formatter: function () {
                return this.value + "";
            }
        }
    },
    yAxis: {
        labels: {
            formatter: function () {
                return "$" + Highcharts.numberFormat(this.value, 0);
            },
        },
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    plotOptions: {
        series: {
            cursor: 'pointer'
        },
        line: {
            events: {
                legendItemClick: function (event) {
                    this.chart.yAxis[0].setExtremes(null, null);
                }
            }
        }
    },
    series: [{
        name: 'set 1',
        color: '#2f7ed8',
        data: [17528662.0, 20197401.0, 23640296.0, 22672580.0, 23082628.0],
    }, {
        name: 'set 2',
        color: '#910000',
        data: [757217.0, 810883.0, 742511.0, 798738.0, 869334.0],
    }, {
        name: 'set 3',
        color: '#8bbc21',
        data: [17528662.0, 207030.0, 190072.0, 249713.0, 243730.0],
    }, {
        name: 'set 4',
        color: '#492970',
        data: [29424.0, 24968.0, 37651.5, 32807.0, 360890.0],
    }]
});

checkExtremes = function () {
    alert('checkExtremes was called');
    var redraw_flag = false;
    thisSetMin = this.Highcharts.charts[0].yAxis[0].getExtremes().min;
    thisSetMax = this.Highcharts.charts[0].yAxis[0].getExtremes().max;
    thisDataMin = this.Highcharts.charts[0].yAxis[0].getExtremes().dataMin;
    thisDataMax = this.Highcharts.charts[0].yAxis[0].getExtremes().dataMax;
    //resize to userMin if dataMin is greater than userMin and autoCalcMin is less than userMin
    min_y_val = thisSetMin;
    yaxis_min = 0;
    if (yaxis_min != null) {
        if (thisDataMin >= yaxis_min && thisSetMin < yaxis_min) {
            alert('Resizing Min from ' + thisSetMin + ' to ' + yaxis_min);
            redraw_flag = true;
            min_y_val = 0;
        }
    }
    //resize to userMax if dataMax is less than userMax and autoCalcMax is greater than userMax
    max_y_val = thisSetMax;
    yaxis_max = 30000000;
    if (yaxis_max != null) {
        if (thisDataMax <= yaxis_max && thisSetMax > yaxis_max) {
            alert('Resizing Max from ' + thisSetMax + ' to ' + yaxis_max);
            redraw_flag = true
            max_y_val = 30000000;
        }
    }
    if (redraw_flag) {
        this.Highcharts.charts[0].yAxis[0].setExtremes(min_y_val, max_y_val);
    }
}
$(chart).on('redraw', checkExtremes(this));

您可以使用tickPositioner,它允许准备动态刻度计算