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

Question

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

在这里，我做了所有剩余的事情，但我不知道如何在每一列上方给出条线......我需要在正轴和负轴上的条线

我的代码

$(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

Answer 1

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

需要注意的几点:

• 有两个“虚拟”系列:一个用于正数，一个用于负数。
• 这两个系列都将 showInLegend 和 enableMouseTracking 设置为 false，因此用户无法与它们互动。
• 这两个系列都将 stacking 设置为 false，因此它们不会成为您要显示的“真实”数据的一部分。
• 这两个系列都将 zIndex 设置为 0。我在代码块下方解释原因。

“dummy”系列的代码如下。

// 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，这样它们就会一个接一个地出现，而不是一个接一个地出现。

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