为什么我的标签不在同一高度

Why my label are not at the same height

我的问题是关于我制作的柱形图.. 我不明白为什么我的标签没有设置在高度上.. 我尝试了很多东西,但我真的不知道.. 在这里你可以找到一个例子:jsfiddle project

    $(function() {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'column',
        height: 200
      },
      title: {
        text: 'Monthly Average Rainfall'
      },
      xAxis: {
        offset: 0,
        labels: {
          useHTML: true,
          rotation: 0
        },
        tickmarkPlacement: 'on',
        gridLineWidth: 0,
        lineWidth: 0,
        tickPosition: 'outside'
      },
      yAxis: {
        gridLineWidth: 0,
        plotLines: [{
          color: '#DDDDDD',
          width: 1,
          value: 0
        }],
        max: 0.92,
        labels: {
          enabled: false
        },
        title: {
          text: ''
        }
      },
      credits: {
        enabled: false
      },
      tooltip: {
        enabled: false,
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0,
          stacking: 'normal',
          dataLabels: {
            enabled: true,
            color: 'black',
            verticalAlign: 'top',
            useHTML: true,
            y: -20
          }
        },
      },
      series: [{
        showInLegend: false,
        negativeColor: '#F14646',
        color: '#00B76C',
        pointWidth: 40,
        data: [0.01, 0.03, 0.03, 0.05, 0.03, 0.10, 0.11, 0.11, 0.15, 0.92]
      }]
    })
  });

});

谢谢!!

似乎 plotOptions.column.stacking = 'normal'plotOptions.column.y: -20 造成了大部分麻烦。所以,首先你应该设置 plotOptions.column.y: 0 (或删除它)。其次,您可以执行以下操作之一

  • 如果您实际上不需要它,请完全删除 plotOptions.column.stacking
    • 一些列标签可能仍显示在栏内而不是上方,这是因为栏上方没有足够的 space - 一种选择是将 yAxis.max 设置为足够大的值保证 space
  • 如果您确实需要堆叠,请改用 yAxis.stackLabels.enabled: true(如果它们干扰,请移除 plotOptions.column.dataLabels

见相关Highcharts yAxis.stackLabels option documentation and their stacked column chart example.