Jquery 如何在Highcharts中显示条形图的剩余百分比？

我想用灰色显示剩余的百分比，如图中所示

到目前为止，我已经尝试过了，但在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' }]
    }]
});

Highcharts.chart（'Chart1Progress'{
图表：{
类型：'bar'，
背景颜色：空，
},
标题：{
文本：空，
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]，
可见：假，
},
亚克斯：{
分:0,，
标题：空，
堆叠标签：{
启用：对，
风格：{
fontWeight:'粗体'，
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“黑色”
}
},
},
打印选项：{
系列：{
堆叠：“百分比”
},
酒吧：{
分组：false，
数据标签：{
已启用：false
}
}
},
图例：{
启用：false，
对齐：“右”，
垂直排列：“顶部”，
x:-30，
y:25，
浮动：是的，
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |“黑色”，
边框颜色：“#CCC”，
边框宽度：1，
影子：对
},
系列：[{
名称：'剩余'，
数据：[3,5,4,1,6]，
边框宽度：0，
颜色：“rgba（0,0,0,0）”
},{
名称：'剩余'，
数据：[3,5,4,1,6]，
边框宽度：0，
堆栈：1，
动画：错，
颜色：“灰色”
}, {
姓名：'约翰'，
数据：[{y:5，颜色：'red'}，{y:3，颜色：'DDDF0D'}，{y:4，颜色：'55BF3B'}，{y:7，颜色：'5dacdf'}，{y:2，颜色：'pink'}]
}]
});

我不确定您是否可以使用api。但是你可以用css“画”线（在图表下面创建
div
）。也可以使用javascript将SVG线条添加到highchart创建的SVG中。最简单的方法是添加第二个系列，计算为现有系列点和最大值的增量，并将该系列的颜色设置为所需的灰色。