javascript - 如何使用 HightCharts 将两个数据标签添加到条形图中

问题描述

我想在每个栏上显示两个标签，一个在栏内，另一个在栏顶部。内部表示数量，上部表示该值占总数的百分比。

 dados = [
    {
                    name: "January",
                    y: 40,
                },
                {
                    name: "February",
                    y: 10,
                },
                {
                    name: "March",
                    y: 7,
                },
                {
                    name: "April",
                    y: 5,
                },
                {
                    name: "June",
                    y: 4,
                },
                {
                    name: "July",
                    y: 1,
                },
                {
                    name: "August",
                    y: 7,
                },
                {
                    name: "September",
                    y: 17,
                },
                {
                    name: "October",
                    y: 12,
                },
                {
                    name: "November",
                    y: 15,
                },
                {
                    name: "December",
                    y: 10,
                }
            ];
  //percentage code
    Array.prototype.sum = function (prop) {
        var total = 0
        for ( var i = 0, _len = this.length; i < _len; i++ ) {
        total += this[i][prop]
        }
        return total
    }

    var soma = dados.sum("y");
    var total = dados.length;

    for (var i = 0; i < dados.length; i++){
        dados[i]['p'] = dados[i].y*100/soma;
    }
//
  Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Quantidade de fatos históricos por período'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Fatos históricos (quantidade)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Quantidade em {point.name}: <b>{point.y} ({point.p:.2f} % )</b>'
    },
    series: [{
        name: 'Population',
        data: dados,
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y}', // one decimal
            y: 10, // 10 pixels down from the top
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    
    <figure class="highcharts-figure">
                            <div id="container"></div>
                            <p class="highcharts-description">
                                
                            </p>
                        </figure>

我添加了一个将 p（百分比）添加到数据的代码，我还想知道 hightcharts 是否已经这样做了。

标签： javascriptjqueryhighcharts

您可以通过将多个数据标签定义为数组来将它们添加到单个点：

dataLabels: [{
  ...
}, {
  ...
}]

现场演示：http: //jsfiddle.net/BlackLabel/5gL6paqr/

API 参考： https ://api.highcharts.com/highcharts/series.column.dataLabels

javascript - 如何使用 HightCharts 将两个数据标签添加到条形图中

问题描述

解决方案

推荐阅读