javascript - 列上方的动态值 + jQuery Highcharts

Question

我正在使用来自 jQuery HighCharts 的堆叠柱形图，例如 this 。 ( fiddle 链接)

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        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.legendBackgroundColorSolid) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'John',
            data: [null, null, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [null,null, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

正如您所看到的，在数字总数的每列上方都有总数。但我需要别的东西。我希望我的第一个栏是 100%。然后我需要计算其他两列的百分比并将这些数字放在该列上方。如何使它们动态化？

Answer 1

您在这里可以做的是扩展点属性并添加一个显示在dataLabels中的新字段。当然，您需要预处理这些百分比。以下示例假设您已经计算了百分比值:

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            format: '{point.perc} %'
        }
    }
}

point.perc 是我们创建的点的 perc 属性，它包含您已经计算的百分比值。在数据数组中，您可以采用以下格式:

series: [{
            data: [{y: 29.9, perc: 100}, {y:71., perc: 50}, {y:106.4, perc: 30}, {y:129.2, perc: 20}]        
        }]

现场演示 here .