如何在yAxis 0值(负/正图)上设置Highcharts xAxis位置?

时间:2022-11-20 16:01:21

I would like to have my xAxis not below my chart but in the middle (on the yAxis zero value).

我希望我的xAxis不是在图表下面,而是在中间(在yAxis 0值上)。

And I would like also to have the xAxis labels :

我也想要有xAxis的标签:

  • above the xAxis when it is a negavite value
  • 当x轴为负值时,在x轴上方
  • below the xAxis when it is a positive value
  • 当x轴为正值时

如何在yAxis 0值(负/正图)上设置Highcharts xAxis位置?

Here is what I have : jsFiddle

这是我所拥有的:jsFiddle

$(function () {
    $('#container').highcharts({
        xAxis: {
                    showFirstLabel : true,
                    showLastLabel : true,
                    type : "category",
                    tickLength : 0,
                    lineWidth : 2
            },

        series: [{
            data: [
                {name : 'T1', y: 123},{name : 'T2', y: 152},{name : 'T3', y: -120},{name : 'T4', y: 0},{name : 'T5', y: 142},{name : 'T6', y: 212}
            ],
            type : 'column'
        }]
    });
});
  • Does it exist an easy way to do this ?
  • 是否存在一种简单的方法?
  • If not, how to do this ?
  • 如果没有,怎么做呢?

Thanks.

谢谢。


Solution :

Thanks to Pawel Fus (thanks, thanks, thanks), here is the solution for my problem : jsFiddle.

感谢Pawel Fus(谢谢,谢谢,谢谢),以下是我的问题的解决方案:jsFiddle。

$(function () {
    $('#container').highcharts({
        chart: {
            renderTo: 'container',
            type: 'column',
            events: {
                load: function () {
                                        var xAxis = this.xAxis[0];
                    var serie = this.series[0];

                    for (var current_tick in xAxis.ticks) {
                        var tick = xAxis.ticks[current_tick];

                        if(serie.data[current_tick]){
                            if (serie.data[current_tick].y > 0) {
                                tick.label.attr({
                                    y: tick.label.y + 18
                                });
                            }
                        }
                    }
                }
            }
        },
        xAxis: {
                    showFirstLabel : true,
                    showLastLabel : true,
                    type : "category",
                    tickLength : 0,
                    crossing:0,
                    opposite:true,
                    lineWidth : 2
            },

        series: [{
            data: [
                {name : 'T1', y: 123},{name : 'T2', y: 152},{name : 'T3', y: -120},{name : 'T4', y: 0},{name : 'T5', y: 142},{name : 'T6', y: 212}
            ],
            type : 'column'
        }]
    });
});

1 个解决方案

#1


1  

Answers for you:

你的答案:

  1. Yes, this is possible by using Highcharts plugin for that.

    是的,使用Highcharts插件可以实现这一点。

  2. This is not supported, you can use chart.events.load to loop over all labels in xAxis and update their position according to value in first series for respective category

    这是不支持的,您可以使用chart.events。加载到xAxis中对所有标签进行循环,并根据各自类别的第一个系列中的值更新它们的位置

#1


1  

Answers for you:

你的答案:

  1. Yes, this is possible by using Highcharts plugin for that.

    是的,使用Highcharts插件可以实现这一点。

  2. This is not supported, you can use chart.events.load to loop over all labels in xAxis and update their position according to value in first series for respective category

    这是不支持的,您可以使用chart.events。加载到xAxis中对所有标签进行循环,并根据各自类别的第一个系列中的值更新它们的位置