Question

我正在使用 jQuery HighCharts 中的堆积柱形图，例如this。（小提琴链接）

$(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％。然后我需要计算其他2列的百分比并将这些数字放在列上方。我怎样才能让它们变得动态？

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。

列+ jQuery Highcharts上方的动态值

1 个答案: