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

javascript jquery highcharts axes
person dogbane    schedule 12.10.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

вы можете использовать концепцию сюжетных линий.

вы можете построить линию для xAxis и Yaxis и 0. это заставит их пересекаться в 0 всегда, даже при изменении размера

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

обновил скрипт js здесь,

эта вещь не пострадает, даже если вы измените размер.

person Strikers    schedule 13.10.2014
comment
Это подход, который я всегда использовал. - person jlbriggs; 13.10.2014

arrow_upward
0
arrow_downward

Попробуйте что-то вроде этого:

yAxis: {
    offset: -15
},

Проверьте эту скрипту: http://jsfiddle.net/a003mc4b/2/

person Swetha    schedule 13.10.2014
comment
это не работает. Если я изменю размер окна или увеличу масштаб диаграммы, оси не останутся на 0. - person dogbane; 13.10.2014