创建图表后需要精确设置 Highcharts 轴最小值/最大值

Question

Most of the time, our app wants to let Highcharts decide the y axis tick positions for a chart. But the user can select a "Customize Range" command and specify custom min and max for the y axis after the chart has been created and shown. Purpose: user may want to export charts that line up with other charts they've made. I have tried a number of things including the following code, but Highcharts continues to follow its own preferences for the min, max and tickInterval (eg it does not respect {5,25} or {-5,35}. And my custom tickPositioner callback is not being called.

okClicked() {  
    this.axis1.startOnTick = false;
    this.axis1.endOnTick = false;   
    this.axis1.alignTicks = false;
    this.axis1.tickPositioner = this.getCustomTicks.bind(this, this.axis1, this.yMin1, this.yMax1);
    this.axis1.setExtremes(this.yMin1, this.yMax1);
    this.axis1.chart.redraw();
}

Answer 1

You can fire chart.update function after the button is clicked, and set axes options to whatever you want them to be:

$('.btn').click(function() {
    Highcharts.each(Highcharts.charts, function(chart, i) {
        chart.yAxis[0].update({
            max: 25,
            min: 5,
            startOnTick: false,
            tickInterval: 5
        });
    });
});

http://jsfiddle.net/BlackLabel/obfudy23/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update

Answer 2

It is possible to solve this issue by adding a simple input field to your html like this:

Min: <input id="min"> <br>
Max: <input id="max">
<button id="update">Update y-axis </button>

Then we need a function which activates on click of the button. Inside this function we will update the Highcharts chart.

$('#update').click(function () {
    chart.update({
       yAxis: {
           min: document.getElementById("min").value,
           max: document.getElementById("max").value,
           tickInterval: 5 //do calculations here to get needed tickInterval
       }
    })
});

As shown in this JSFiddle , it alters the y-axis. You can extend the update function however you like, just override the previous settings like happened in the code shown above.

On a sidenote: It has to be noted that in the fiddle the y-axis can be off at times, depending on the inserted values. The tickInterval should be dynamically calculated for this to work.