Question

我正在尝试将条形标签设置为“高于条形”，并且我正在使用xAxis.label.x属性来完成此操作。但是，我注意到条形码和标签之间的距离略有不同。如果您看小提琴，（我试图将标签尽可能地靠近放置），其中一些标签的距离比其他标签的距离小。这是四舍五入的问题吗？有办法避免吗？请指教。

https://jsfiddle.net/sabira/fmnysehq/32/

plotOptions: {
  bar: {
            pointPadding: 0,
  }
},

xAxis: {
    categories: ['2010', '2011', '2012', '2013', '2014'],
    labels: {
                    x: 0,
        align: 'left',
        reserveSpace: false,
        y: -20,
    },
        min: -0.2,
      max: 4.2,
    tickWidth: 0
},
yAxis: {
visible: false
},

series: [{
    data: [39.9, 71.5, 106.4, 23, 67],
    pointPlacement: 'on',
    dataLabels: {
        enabled: true
    }
}]

}）;

Answer 1

如果从系列中删除pointPlacement选项，它将很好用。

Highcharts.chart('container', {
  chart: {
    type: 'bar',
  },

  xAxis: {
    categories: ['2010', '2011', '2012', '2013', '2014'],
    labels: {
      x: 0,
      align: 'left',
      reserveSpace: false,
      y: -12,
    }
  },


  series: [{
    data: [39.9, 71.5, 106.4, 23, 67],
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

Answer 2

这似乎是Highcharts中的渲染问题（与其他许多问题一样），但是使用以下设置可以获得更好的结果：

Highcharts.chart('container', {
    chart: {
        type: 'bar',
    },

    title: {
        text: 'Default title',
        margin: 50
    },

    credits: {
        enabled: false
    },

    legend: {
        enabled: false
    },
    plotOptions: {
      bar: {
                pointPadding: 0,
      }
    },

    xAxis: {
        categories: ['2010', '2011', '2012', '2013', '2014'],
        labels: {
            x: 5,
            align: 'left',
            reserveSpace: false,
            y: 33,
        },
            min: -0.2,
          max: 4.2,
        tickWidth: 0
    },
    yAxis: {
    visible: false
    },

    series: [{
        data: [39.9, 71.5, 106.4, 23, 67],
        pointPlacement: 'between',
        dataLabels: {
            enabled: true
        }
    }]
});

希望这会有所帮助：）

高图表：水平条形图中条上方的xAxis标签

2 个答案: