javascript - 自定义highChart中的堆积柱形图

我正在尝试像这样自定义堆积的柱形图



在这里，我完成了所有剩余的工作，但是我不知道如何在每列上方给出该条线.....我需要在正轴和负轴上都有该条线

我的密码

$(document).ready(function () {
    $('#div1').highcharts({
         chart: { type: 'column', backgroundColor: 'transparent' },
        title: { text: null },
        subtitle: { text: null },
        credits: {
            enabled: false
        },
                    xAxis: {
            categories: categories,
            labels: {
                rotation: 0,
                style: {
                    fontWeight: 'normal',
                    fontSize: '0.9vw',
                    fontFamily: 'Verdana, sans-serif',
                    color: "black"
                }
            }
        },
        yAxis: {
            title: {
                enabled: false
            },
            lineWidth: 0,
            gridLineWidth: 1,
            labels: {
                enabled: true
            },
           // gridLineColor: 'transparent',
            plotLines: [{
                color: '#ddd',
                width: 1,
                value: 0
            }],

        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series:seriesforSeniorUPT
    });
});

});

链接
Fiddle

最佳答案

为了详细说明Sebastian Bochan的有用评论，以下是您的提琴的更新版本，其中包含两个“虚拟”系列作为有图案的背景:https://jsfiddle.net/brightmatrix/hc8rLy18/2/

注意事项:

有两个“虚拟”系列:一个用于正数，一个用于负数。

这两个系列都将showInLegend和enableMouseTracking设置为false，因此用户无法与它们进行交互。

这两个系列都将stacking设置为false，因此它们将不属于要显示的“真实”数据的一部分。

这两个系列都将zIndex设置为0。我在代码块下面解释了为什么。

“虚拟”系列的代码如下。

// background for positive values
obj = {};
obj["name"] = 'patternFill';
obj["data"] = [120, 120];
obj["color"] = 'url(#highcharts-default-pattern-3)';
obj["grouping"] = false;
obj["zIndex"] = 0;
obj["enableMouseTracking"] = false;
obj["stacking"] = false;
obj["showInLegend"] = false;
seriesforSeniorUPT.push(obj);

// background for negative values
obj = {};
obj["name"] = 'patternFill';
obj["data"] = [-80, -80];
obj["color"] = 'url(#highcharts-default-pattern-3)';
obj["grouping"] = false;
obj["zIndex"] = 0;
obj["enableMouseTracking"] = false;
obj["stacking"] = false;
obj["showInLegend"] = false;
seriesforSeniorUPT.push(obj);

对于这三个“真实”数据系列，我将zIndex设置为10，因为它们将出现在我们用于模式背景的“虚拟”系列中。

对于所有系列，我都将grouping设置为false，以便它们将一个出现在另一个之上，而不是一个接一个。

这是输出的屏幕截图。我希望这是有帮助的!