Javascript 条形图-条形图填充和对齐

我有一个堆积百分比条形图，显示了3个条形

JSFiddle：

由于某些原因，这些条之间有很大的空间，并且没有与标签对齐（只有中间的一个）

设置一个固定的

高度

并使用

点填充

我可以更接近我想要的，但是这些条仍然没有对齐：

有什么想法吗？在这里设置固定高度是正确的吗？

您可以在所有系列上或在

绘图选项中设置为false，这将解决您遇到的问题：

plotOptions: {
    series: {
        grouping: false
    }
}


Highcharts.chart（'container'{
图表：{
输入：“酒吧”，
背景色：“rgba（0,0,0,0）”，
//高度：“200px”，
//边距：[40，空，空，空]
},
标题：{
文本：“条”，
对齐：“左”
},
学分：{
已启用：false
},
出口：{
已启用：false
},
亚克斯：[{
标题：{
案文：“”
},
最低：0
}],
图例：{
已启用：false
},
系列：[{
数据：[{
名称：“Bar1”，
y:9994708.36
}],
名称：“Capacidade de Recebimento Ociosa”，
颜色：“DDD”，
工具提示：{
点格式：“● {series.name}：{point.y}t（{point.percentage:.2f}%）“
},
堆栈：“接收”，
堆叠：“百分比”
},
{
数据：[{
名称：“Bar1”，
y:5291.64
}],
名称：“美国陆军司令部司令部司令部”，
工具提示：{
点格式：“● {series.name}：{point.y}t（{point.percentage:.2f}%）“
},
堆栈：“接收”，
堆叠：“百分比”
},
{
数据：[{
名称：“Bar2”，
y:9472.63
}],
名称：“奥西奥萨运动中心”，
颜色：“DDD”，
工具提示：{
点格式：“● {series.name}：{point.y}t（{point.percentage:.2f}%）“
},
堆栈：“移动”，
堆叠：“百分比”
},
{
数据：[{
名称：“Bar2”，
y:4002.37
}],
名称：“美国电影节”，
工具提示：{
点格式：“● {series.name}：{point.y}t（{point.percentage:.2f}%）“
},
堆栈：“移动”，
堆叠：“百分比”
},
{
数据：[{
名称：“Bar3”，
y:4260.82
}],
名称：“巴罗科萨Capacidade de Bar3”，
颜色：“DDD”，
工具提示：{
点格式：“● {series.name}：{point.y}t（{point.percentage:.2f}%）“
},
堆栈：“远征”，
堆叠：“百分比”
},
{
数据：[{
名称：“Bar3”，
y:3124.18
}],
名称：“美国陆军第三炮兵司令部”，
工具提示：{
点格式：“● {series.name}：{point.y}t（{point.percentage:.2f}%）“
},
堆栈：“远征”，
堆叠：“百分比”
}
],
xAxis：{
类型：“类别”，
位置：[0,1,2]
},
打印选项：{
系列：{
分组：false
}
}
});

为什么要使用具有单个数据值的多个系列，而不是具有多个数据点的单个（或更少）系列？图表是在后端创建的。这些系列也是另一个图表的一部分，因此更容易使用它们。不管怎样，这不要紧，是吗？我是说。。。只要我把它们叠好。。。