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

时间:2013-12-19 13:37:50

标签: javascript jquery highcharts

我想让我的xAx不在我的图表之下但在中间(在yAxis零值上)。

我还希望拥有xAxis标签:

  • 高于xAxis ,当它是 negavite 值时
  • 低于xAxis ,当

Wanted chart

以下是我的内容: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'
        }]
    });
});
  • 这样做是否容易?
  • 如果没有,怎么办?

感谢。


解决方案:

感谢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 个答案:

答案 0 :(得分:1)

答案:

  1. 是的,可以使用Highcharts plugin进行此操作。

  2. 不支持此功能,您可以使用chart.events.load循环遍历xAxis中的所有标签,并根据相应类别的第一个系列中的值更新其位置