Question

我试图让我的图表的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]]
        }]
    });
});

Answer 1

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

你可以为xAxis和Y轴分别绘制一条线。即使你调整大小，它也会使它们始终相交

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

更新了您的js小提琴here，

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

Answer 2

尝试这样的事情：

yAxis: {
    offset: -15
},

检查这个小提琴：http://jsfiddle.net/a003mc4b/2/

Highcharts：使X和Y轴相交为0

2 个答案: