Question

我的问题是关于我制作的柱形图.. 我不明白为什么我的标签没有设置在高度上.. 我尝试了很多东西，但我真的不知道.. 您可以在此处找到一个示例：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]
      }]
    })
  });

});

谢谢！

Answer 1

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

如果您实际上并不需要，请完全删除plotOptions.column.stacking
- 某些列标签可能仍然显示在栏内而不是上方，这是因为列上方没有足够的空间 - 一个选项是将yAxis.max设置为足够大的值以保证空间
如果您确实需要堆叠，请使用yAxis.stackLabels.enabled: true代替（plotOptions.column.dataLabels如果他们发生干扰）

查看相关的Highcharts yAxis.stackLabels option documentation及其stacked column chart example。

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

1 个答案: