Highcharts: make the X and Y axes intersect at 0

问题:

I'm trying to make the X and Y axes of my chart intersect at 0, always. Currently, I'm intercepting the 'load' event and then changing the offset of the axes which works initially, but when the window is resized or the chart is zoomed in, the axes don't update.

How can I keep the axes centred on 0 even when the window is resized or the chart zoomed?

Here's my fiddle and code: http://jsfiddle.net/a003mc4b/

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'scatter',
            zoomType: 'xy',
            events: {
                load : function() {
                    this.xAxis[0].update({
                            offset: -this.yAxis[0].translate(0)
                        });
                    this.yAxis[0].update({
                            offset: -this.xAxis[0].translate(0)
                        });
                }
            },
        },

        title: {
            text: 'X and Y axis should intersect at 0'
        },
        yAxis: {
            lineColor: '#FF0000',
            lineWidth: 1
        },
        xAxis: {
            lineColor: '#FF0000',
            lineWidth: 1
        },  
        series: [{
            data: [[0,0],[1,1],[2,5],[-1,-5],[0,5]]
        }]
    });
});

回答1:

you can use the concept of plot lines.

you can plot a line each for xAxis and Yaxis an 0. this will make them intersect at 0 always even when you resize

xAxis: [{
 plotLines: [{
                value: 0,
                 width: 2,
                color: 'blue'
            }]
}],
yAxis : [{
 plotLines: [{
                value: 0,
                 width: 2,
                color: 'blue'
            }]    
}]

updated your js fiddle here,

this thing will not get affected even you resize.

回答2:

Try something like this:

yAxis: {
    offset: -15
},

Check this fiddle: http://jsfiddle.net/a003mc4b/2/