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

Question

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

即使调整窗口大小或缩放图表，我如何才能使轴以 0 为中心？

这是我的 fiddle 和代码: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]]
        }]
    });
});

Answer 1

您可以使用情节线的概念。

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

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

更新了你的 js fiddle here ,

即使你调整大小，这个东西也不会受到影响。