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

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为大号添加$符号和逗号..

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

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

查看条形图演示以及他们的api文档