0

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

    $(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]
      }]
    })
  });

});

谢谢！！

4

1 回答 1

0

似乎这是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 选项文档及其堆积柱形图示例。

于 2016-05-05T17:53:00.363 回答