如何调整第一个类别名称在xAxis上的位置？

Question

我正在尝试创建一个相当密集的条形图，在yAxis上具有绘图带。有没有办法将打印区带标签保留在原处，但将xAxis类别标签/条向下推，以确保没有重叠？

没有运气来调整pointPadding，pointWidth或总体图表height。

Answer 1

您可以在xAxis.min属性中设置负值并隐藏第一个标签：

xAxis: {
    type: 'category',
    min: -1,
    showFirstLabel: false
}

实时演示： http://jsfiddle.net/BlackLabel/b3Lhvyue/

API参考： https://api.highcharts.com/highcharts/xAxis.min

Answer 2

我不确定是否可以在给定的末端填充Axis刻度/标签/条以达到您想要的结果。

但是，有一种方法可以使“绘图带”标签的位置偏移，以使它们不会与yAxis.plotBands.label.y的条重叠。

例如：

Highcharts.chart('container',   {
    chart: {
      type: 'bar'
    },
    title: {
      text: '10 Virtues'
    },
    xAxis: {
      categories: [
        'Virtue 1',
        'Virtue 2',
        'Virtue 3',
        'Virtue 4',
        'Virtue 5',
        'Virtue 6',
        'Virtue 7',
        'Virtue 8',
        'Virtue 9',
        'Virtue 10'
      ],
      title: {
        text: null
      }
    },
    yAxis: {
      min: 0,
      max: 100,
      tickInterval: 25,
      title: {
        text: 'Percentile Rank'
      },
      labels: {
        format: '{value}%'
      },
      plotBands: [
        {
          color: '#b2d3f9',
          from: 0,
          to: 25,
          label: {
            text: 'Below Average',
            align: 'center',
            y: -2
          }
        },
        {
          color: '#7aacff',
          from: 25,
          to: 75,
          label: {
            text: 'Average',
            align: 'center',
            y: -2
          }
        },
        {
          color: '#4f91ff',
          from: 75,
          to: 100,
          label: {
            text: 'Above Average',
            align: 'center',
            y: -2
          }
        }
      ]
    },
    tooltip: {
      valueSuffix: '%'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      },
      series: {
        groupPadding: 0,
        shadow: false
      }
    },
    series: [
      {
        dataLabels: [
          {
            align: 'right',
            format: '{y}%'
          }
        ],
        data: [
          10,
          20,
          30,
          40,
          50,
          60,
          70,
          80,
          90,
          100
        ],
        color: '#aaaaaa',
        borderColor: '#555555',
        showInLegend: false
      }
    ]
  });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>