Highcharts：使X和Y轴相交为0 [英] Highcharts: make the X and Y axes intersect at 0

问题描述

我试图让图表的X轴和Y轴相交为0，始终。目前，我正在拦截'load'事件，然后更改最初工作的坐标轴的偏移量，但当窗口大小调整或图表放大时，坐标轴不会更新。

这些是我的小提琴和代码： p a href =http://jsfiddle.net/a003mc4b/ =nofollow> http://jsfiddle.net/a003mc4b/

<$ p $ {
$ b图：{
类型：'scatter'）$ {code> $（function（）{
$ ，
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）
}）;




$ {
text：'X和Y轴应该相交为0'
}，
yAxis：{
lineColor：'＃FF0000'，
lineWidth：1
}，
xAxis：{
lineColor：'＃FF0000'，
lineWidth：1
}，
series：[{
data：[[0,0]，[1,1]，[2,5]，[ - 1，-5] ，[0,5]]
}]
}）;
}）;

解决方案

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

你可以为xAxis和Yaxis分别画出一条0.这将使它们始终相交于0，即使你调整大小时也是如此。

  xAxis：[{
 plotLines：[{
 value：0，
 width：2，
 color：'blue'
}] 
}]，
 yAxis：[{
 plotLines：[{
 value：0，
 width：2，
 color： 'blue'
}] 
}] 
  

更新了您的js小提琴这里， b
$ b

这件事情不会受到影响您调整大小。

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]]
        }]
    });
});

解决方案

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.

这篇关于Highcharts：使X和Y轴相交为0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！