如何在组列highcharts上显示多数据标签 [英] How to show multi data Labels on group column highcharts

问题描述

我要显示在列上的数据如下：

I have the data that I want to display on column like this:

我尝试过这段代码，但它不工作。我该如何做？

I tried this code but it isn't working. How can I do this?

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Javascript：

Javascript:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function() {
                var allSeries = this.series.chart.series;
                var totalAmount = 0;
                for(var s in allSeries) { totalAmount += allSeries[s].points[this.point.x].Amount; }

                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y + ' (<b>$ ' + this.point.Amount +') <br/>'+
                   'Total: '+ this.point.stackTotal + ' (<b>$ ' + totalAmount +')';
            }
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    },
                    formatter: function() {
                      return this.point.Amount + '%'
                    },

                }
            }
        },
        series: [{
            name: 'John',
            data: [{y: 5, Amount: 100}, {y: 3, Amount: 60}, {y: 4, Amount: 80}]
        }, {
            name: 'Joe',
            data: [{y: 3, Amount: 60}, {y: 4, Amount: 80}, {y: 4, Amount: 80}]
        }]
    });
});

推荐答案

查看 小提琴

Check out this Fiddle

    dataLabels: {
      enabled: true,
      useHTML: true,
      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
      style: {
        textShadow: '0 0 3px black, 0 0 3px black'
      },
      formatter: function() {
        var pointHeight = this.point.shapeArgs.height + 20;
        return '<div class="datalabel" style="position: relative; top: 0px">' + this.point.Amount + '%' + '</div><div class="datalabelInside" style="text-shadow:none;color:#000;position: absolute; top:' + pointHeight / 2  + 'px">' + this.y + '</div>';
      }

    }

这篇关于如何在组列highcharts上显示多数据标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！