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

Question

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

我发现这个问题类似How do I set a minimum upper bound for an axis in 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));

Answer 1

您可以使用tickPositioner它允许准备动态报价计算。