jquery - 如何在 Highcharts 中显示 Bar 的剩余百分比？

Question

我想在图像 中像这样以灰色显示条形的剩余百分比

到目前为止，我已经尝试过了，但无法在 Highcharts 文档中找到这种类型所以请告诉我应该如何使用 highcharts 文档或 jquery 解决这个问题

Highcharts.chart('Chart1Progress', {
    chart: {
        type: 'bar',
        backgroundColor: null
    },
    title: null,
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
        visible: false,
        shadow: true
    },
    yAxis: {
        min: 0,
        title: null,
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        },

    },
    legend: {
       enabled: false,
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'black',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: true
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'John',
        data: [{ y: 5, color: 'red' }, { y: 3, color: '#DDDF0D' }, { y: 4, color: '#55BF3B' }, { y: 7, color: '#5dacdf' }, { y: 2, color: 'pink' }]
    }]
});

http://jsfiddle.net/at8m1r24/

Answer 1

Highcharts.chart('Chart1Progress',{
        chart: {
            type: 'bar',
            backgroundColor: null,
        },
        title: {
            text: null,
        },
        xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
        visible: false,
        },
        yAxis: {
        min: 0,
        title: null,
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        },
        },
        plotOptions: {
            series: {
                stacking: 'percent'
            },
            bar: {
                grouping: false,
                dataLabels: {
                    enabled: false
                }
            }
        },
        legend: {
            enabled: false,
            align: 'right',
            verticalAlign: 'top',
            x: -30,
            y: 25,
            floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'black',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: true
        },
        series: [ {
            name: 'Remaining',
            data: [3, 5, 4, 1, 6],
            borderWidth: 0,
            color: "rgba(0,0,0,0)"
        },{
            name: 'Remaining',
            data: [3, 5, 4, 1, 6],
            borderWidth: 0,
            stack: 1,
            animation: false,
            color: "gray"
        }, {
        name: 'John',
        data: [{ y: 5, color: 'red' }, { y: 3, color: '#DDDF0D' }, { y: 4, color: '#55BF3B' }, { y: 7, color: '#5dacdf' }, { y: 2, color: 'pink' }]
    }]
        
    });

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

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

您应该将堆叠设置为百分比，并且要堆叠的数据很少