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

Question

我有一个显示 3 个条形的堆叠百分比条形图。

JSFiddle:https://jsfiddle.net/Lr0bszj6/

由于某种原因，条形之间有很多空间并且没有与标签对齐(只有中间一个)。

设置固定的 height 并乱用 pointPadding 我可以更接近我想要的，但条仍然没有对齐:

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

Answer 1

你可以设置grouping在所有系列上或在 plotOptions 中设置为 false，这将解决您遇到的问题:

plotOptions: {
    series: {
        grouping: false
    }
}

Highcharts.chart('container', {
    chart: {
        type: "bar",
        backgroundColor: "rgba(0, 0, 0, 0)",
        //height: '200px',
        //margin: [40, null, null, null]
    },
    title: {
        text: "Bars",
        align: "left"
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    yAxis: [{
        title: {
            text: ""
        },
        min: 0
    }],
    legend: {
        enabled: false
    },
    series: [{
            data: [{
                name: "Bar1",
                y: 9994708.36
            }],
            name: "Capacidade de Recebimento Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "receiving",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar1",
                y: 5291.64
            }],
            name: "Capacidade de Recebimento Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "receiving",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar2",
                y: 9472.63
            }],
            name: "Capacidade de Movimento Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "movement",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar2",
                y: 4002.37
            }],
            name: "Capacidade de Movimento Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "movement",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar3",
                y: 4260.82
            }],
            name: "Capacidade de Bar3 Ociosa",
            color: "#DDD",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "expedition",
            stacking: "percent"
        },
        {
            data: [{
                name: "Bar3",
                y: 3124.18
            }],
            name: "Capacidade de Bar3 Usada",
            tooltip: {
                pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y} t</b> ({point.percentage:.2f}%)"
            },
            stack: "expedition",
            stacking: "percent"
        }
    ],
    xAxis: {
        type: "category",
        tickPositions: [0,1,2]
    },
    plotOptions: {
        series: {
            grouping: false
        }
    }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

工作 JSFiddle 示例: https://jsfiddle.net/ewolden/Lr0bszj6/12/