Javascript Highcharts-柱形图自定义

我正在使用Highcharts库创建柱形图。我正试图根据我的要求定制柱状图，但有两件事我做不到。 首先是柱状图的底部边框，第二个是所有系列的柱状图背景。看看下面的图片，我需要实现什么。

到目前为止，我所做的是：

jQuery（文档）.ready（函数）（jQuery）{
jQuery（“#portlet内容”）.highcharts({
学分：{
已启用：false
},
出口：{
已启用：false
},
图表：{
类型：“列”
},
标题：{
文本：“申请数量”
},
副标题:{
正文：“按国家”
},
xAxis：{
可见：假
},
亚克斯：{
可见：假
},
图例：{
启用：对，
对齐：“右”，
垂直排列：'中间'，
布局：“垂直”，
填充：3，
项目编号：5，
项目MarginBottom:5，
项目样式：{
线宽：“14px”
},
符号高度：12，
符号宽度：12，
符号半径：6
},
工具提示：{
格式化程序：函数（）{
返回“”+此.y+“”；
},
是的，
边框宽度：0，
风格：{
填充：0，
字体大小：“16px”
},
影子：错
},
系列：[
{
名称：“联合王国”，
颜色：“#32323A”，
数据：[
[294]
]
}, {
名称：“美国”，
颜色：“#EB4825”，
数据：[
[65]
]
}
, {
名称：“阿拉伯联合酋长国”，
颜色：“#F7CC1E”，
数据：[
[35]
]
}
, {
名称：“印度”，
颜色：“#24C746”，
数据：[
[23]
]
}
, {
名称：“加拿大”，
颜色：“#2587EC”，
数据：[
[18]
]
}
]
});
});

注意：我修改了我的答案，以便更好地解决原始海报问题中的具体要求

以下是我的建议：

创建一个堆叠柱形图，其中一个系列是用户无法交互的“虚拟”系列。这将作为你的背景

下面是我根据Highcharts堆叠柱演示制作的一把快速小提琴：

请让我知道这是否对你有帮助

---

这就是您要寻找的，用于为所有系列搜索自定义列背景。您是否能够将代码插入到问题的内联部分，以便人们可以看到它？：~）@不，我正在寻找所有列的某个最大点的列灯光背景，并在图像中显示传递数据点的所有列的不同颜色。我尝试了很多，但无法完全按照我的要求执行。按照您的示例，我可以按预期显示列，但这样我无法在图例中显示标签。我发现我遗漏了您问题的一些关键部分，因此我更新了我的答案和上面的相关提琴。请让我知道这对你来说是否是一个更好的回答。谢谢，它真的帮助了我很多。现在我可以按预期显示列，并在右侧显示系列标签。我根据我的要求做了一些修改来显示。检查这里（）。现在唯一的问题是工具提示，因为我想在堆栈顶部显示它，但它显示在顶部。实际上，我尝试使用css从顶部（）在固定位置显示工具提示，但问题是我正在生成动态图，所以有时它会按列重叠。另一个问题是，当鼠标悬停在背景系列上时，我无法在顶部弹出工具提示。我运行了您的演示，但灰色列（背景）不会显示工具提示。我唯一观察到的是“白色形状”印在彩色栏的上方。

jQuery(document).ready(function(jQuery) {

          jQuery('#portlet-content').highcharts({
        credits: {
            enabled: false
        },
        exporting: {
          enabled: false
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Number of Applications'
        },
        subtitle: {
            text: 'BY COUNTRY'
        },
        xAxis: {
          visible: false
        },
        yAxis: {
            visible: false
        },
        legend: {
            enabled: true,
            align: 'right',
            verticalAlign: 'middle',
            layout: 'vertical',
            padding: 3,
            itemMarginTop: 5,
            itemMarginBottom: 5,
            itemStyle: {
                lineHeight: '14px'
            },
            symbolHeight: 12,
            symbolWidth: 12,
            symbolRadius: 6
        },
        tooltip: {
            formatter: function() {
                                return '<b style="color:'+this.point.color+'">'+ this.y +'</b>';
                            },
            useHTML: true,
            borderWidth: 0,
            style: {
                padding: 0,
                fontSize: '16px'
            },
            shadow: false
        },
        series: [
            {
              name: "United Kingdom",
              color: '#32323A',
              data: [
                  [294]
              ]
            }, {
              name: "USA",
              color: '#EB4825',
              data: [
                  [65]
              ]
            }
            , {
              name: "United Arab Emirates",
              color: '#F7CC1E',
              data: [
                  [35]
              ]
            }
            , {
              name: "India",
              color: '#24C746',
              data: [
                  [23]
              ]
            }
            , {
              name: "Canada",
              color: '#2587EC',
              data: [
                  [18]
              ]
            }
        ]
      });

    });

plotOptions: {
    column: { stacking: 'percent' }
},
series: [
    /* this is the "dummy" series
       set the "showInLegend" and "enableMouseTracking" attributes 
       to "false" to prevent user interaction */
    { name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray', 
              showInLegend: false, enableMouseTracking: false }, 
    /* here's the real data; set a unique color for each
       set nulls for the columns where that color/data is not needed */
    { name: 'Series 1', color: 'red', data: [2,null,null,null,null] }, 
    { name: 'Series 2', color: 'orange', data: [null,2,null,null,null] },
    { name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] },
    { name: 'Series 4', color: 'green', data: [null,null,null,2,null] },
    { name: 'Series 5', color: 'blue', data: [null,null,null,null,1] }
]