如何在HighCharts的每个条形图上方添加标签

How to add a label above each bar in HighCharts

本文关键字：条形图 方添 加标签 HighCharts      更新时间：2023-09-26

我试图在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
    }]
    });
  });
 });`

我试过了，但是当我添加标签时，每个栏都会出现一个标签。那么，怎么做呢?!

将此添加到您的系列中:

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文档

Highcharts stackLabels将完成这项工作。看到

相关文章：