Question

我正在尝试在Highcharts的条形图中添加标签。在我的案例中，您可以在此处看到每个栏：

$(function () {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'column'
        },

        title: {
            text: 'Indicator per Sex'
        },

        xAxis: {
           categories: [
                'Jan',
                'Fev',
                'Mar',
                'Apr',
                'May',
               'Jun',
               'Jul',
               'Aug',
               'Sep',
               'Oct',
               'Nov',
               'Dez'
           ]
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Consults'
            }
        },

        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [
        {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
        color: '#FF0011',
        stack: 0
    }, {
        data: [30, 176.0, 135.6, 148.5, 216.4, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
        color: '#3333FF',
        stack: 0
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
        color: '#FF0011',
        stack: 1
    }, {
        data: [30, 176.0, 135.6, 148.5, 216.4, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
        color: '#3333FF',
        stack: 1
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
        color: '#FF0011',
        stack: 2
    }, {
        data: [30, 176.0, 135.6, 148.5, 216.4, 29.9, 71.5, 106.4, 129.2, 144.0, 10, 20],
        color: '#3333FF',
        stack: 2
    }]
    });
  });
 });`

我试过了，但是当我添加标签时，每个条形会出现一个标签。那么，这是怎么做的？！

Answer 1

将此添加到您的系列中：

dataLabels: {
    enabled: true,
    rotation: 0,
    color: '#000000',
    backgroundColor: '#FFFFFF',
    align: 'center',
    x: 4,
    y: 0,
    style: {
        fontSize: '10px',
        fontFamily: 'Verdana, sans-serif'
    }

当然要根据需要调整.. 如果需要，您还可以添加formatter为大号添加$ sign和逗号..

编辑：
刚刚看到它是条形图..
你需要将它添加到你的情节选项中：

plotOptions: {
   bar: {
      dataLabels: {
          enabled: true
      }
   }
},

查看栏chart demo以及api documentation

Answer 2

Highcharts stackLabels将完成这项工作。 See here

如何在HighCharts中的每个栏上方添加标签

2 个答案: