highcharts - Xaxis 应该在高图中的 (0,0) 对齐

问题描述

当数据包含负值时，我想在位置 (0,0) 对齐 xaxis 线和轴标签。前任。考虑这个小提琴示例，其中负值栏下降，xaxis 设置为 (0,0) http://jsfiddle.net/13d54mp8/2/

   var YTD = 'YTD';
   var yr1 = 'Year 1';
   var yr3 = '*3 Year';
   var yr5 = '*5 Year';
   var sinceIN = '* Since Inception (5/31/2012)';
   
   $(function() {
    var chart;
    $(document).ready(function() {
     chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'column',
        events: {
          load: function() {
            var xx = (-1) * (this.yAxis[0].translate(0, false, false));
            this.xAxis[0].axisGroup.translate(0, xx);
            this.xAxis[0].labelGroup.translate(0, xx);
          }
        }
      },
      title: {
        text: 'Report Title',
        style: {
          fontSize: '18px',
          color: '#1D5293',
          fontWeight: 'bold'
        },
      },
      subtitle: {
        text: '(As of 6/30/2012)',
        style: {
          fontSize: '18px',
          color: '#1D5293'
        },
        y: 40
      },
      xAxis: {
        categories: [YTD, yr1, yr3, yr5, sinceIN],
        lineColor: '#C1BADB',
        tickWidth: 2,

      },
      yAxis: {
        title: {
          text: ''
        },
        lineColor: '#C1BADB',
        lineWidth: 1,
        labels: {
          formatter: function() {
            return this.value + '%';
          }
        },
        gridLineWidth: 0,
        tickWidth: 2

      },
      tooltip: {
        enabled: true,
        formatter: function() {
          return this.series.name + ': ' + this.y + '%';
        },
      },
      credits: {
        enabled: false
      },
      series: [{
          name: 'XXX Company Ltd. (Net)',
          data: [3.02, -0.61, 2.03, 1.51, 5.35],
          dataLabels: {
            enabled: true,
            color: '#333',
            formatter: function() {
              return this.y + '%'
            }
          },
          color: '#1D5293'
        },
        {
          name: 'XXX Relative Return Index (Gross)**',
          data: [2.45, 0.85, 4.11, 0.73, 3.56],
          dataLabels: {
            enabled: true,
            color: '#333',
            formatter: function() {
              return this.y + '%'
            }
          },
          color: '#9E9E9E'
        }
      ],
      legend: {
        layout: 'vertical',
        align: 'top',
        verticalAlign: 'top',
        x: 50,
        y: 65,
        borderWidth: 0,
        margin: 30
      },
    });
  });
});

现在我想为倒置柱形图使用相同的用例，其中 xaxis 位于顶部，yaxis 位于右侧。检查小提琴 - http://jsfiddle.net/fa2e80qu/3/

    var YTD = 'YTD'
var yr1 = 'Year 1'
var yr3 = '*3 Year'
var yr5 = '*5 Year'
var yr7 = '*7 Year'
var yr9 = '*9 Year'
var sinceIN = '* Since '

$(function() {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                events: {
                    load: function() {
                        var xx = (0.34)* (this.yAxis[0].translate(0, false, false));
                        this.xAxis[0].axisGroup.translate(0, xx);
                        this.xAxis[0].labelGroup.translate(0, xx);

                    }
                }
            },
            title: {
                text: 'Report Title',
                style: {
                    fontSize: '18px',
                    color: '#1D5293',
                    fontWeight: 'bold'
                },
            },
            subtitle: {
                text: '(As of 6/30/2012)',
                style: {
                    fontSize: '18px',
                    color: '#1D5293'
                },
                y: 40
            },
            xAxis: {
                categories: [YTD, yr1, yr3, yr5, yr7,yr9, sinceIN],
                lineColor: '#C1BADB',
                tickWidth: 2,
                opposite:true
            
            },
            yAxis: {
            opposite:true,
                reversed:true,
                title: {
                    text: ''
                },
                lineColor: '#C1BADB',
                lineWidth: 1,
                labels: {
                    formatter: function() {
                        return this.value + '%';
                    }
                },
                gridLineWidth: 0,
                tickWidth: 2

            },
            tooltip: {
                enabled: true,
                formatter: function() {
                    return this.series.name + ': ' + this.y + '%';
                },
            },
            credits: {
                enabled: false
            },
            series: [
                {
                name: 'XXX Company Ltd. (Net)',
                data: [3.02, -0.61, 2.03, 1.51, 5.35, -0.50,2.5],
                dataLabels: {
                    enabled: true,
                    color: '#333',
                    formatter: function() {
                        return this.y + '%'
                    }
                },
                color: '#1D5293'},
            {
                name: 'XXX Relative Return Index (Gross)**',
                data: [2.45, 0.85, 4.11, 0.73, 3.56,-0.5,1.6],
                dataLabels: {
                    enabled: true,
                    color: '#333',
                    formatter: function() {
                        return this.y + '%'
                    }
                },
                color: '#9E9E9E'}
            ],
            legend: {
                enabled:false,
                layout: 'vertical',
                align: 'top',
                verticalAlign: 'top',
                x: 50,
                y: 65,
                borderWidth: 0,
                margin: 30
            },
        });
    });

});

预期的行为是让 xaxis 线和标签在位置 (0,0) 正确对齐

标签： highchartsnegative-numberx-axis

chart: { ..., events: { load: function() { var xx = this.yAxis[0].toPixels(0) - this.plotTop; this.xAxis[0].axisGroup.translate(0, xx); this.xAxis[0].labelGroup.translate(0, xx); } } }

highcharts - Xaxis 应该在高图中的 (0,0) 对齐

问题描述

解决方案

推荐阅读