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的有用评论，这里是你的小提琴的更新版本，有两个“虚拟”系列作为图案背景：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，它们将显示在我们用于我们的patterend背景的“虚拟”系列中。

对于所有系列，我将grouping设置为false，这样它们就会出现在另一个上面，而不是彼此相邻。

这是输出的屏幕截图。我希望这有用！

在highChart中自定义堆积柱形图

1 个答案: