javascript - Highcharts :使X和Y轴在0处相交

我试图使图表的X和Y轴始终相交于0。目前，我正在拦截“加载”事件，然后更改最初起作用的轴的偏移量，但是当调整窗口大小或放大图表时，轴不会更新。

即使调整了窗口大小或放大了图表，如何将轴居中于0？

这是我的小提琴和代码：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]]
        }]
    });
});

最佳答案

您可以使用绘图线的概念。

您可以为xAxis和Yaxis分别绘制一条线，使其为0。这将使它们始终在0处相交，即使您调整大小

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

更新了您的js小提琴here，

即使您调整大小，这件事也不会受到影响。