条形图-条形填充和对齐

Question

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

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

由于某些原因，条形图之间有很大的空间，并且与标签不对齐（仅中间）。

设置一个固定的new_src = make_dataset(select_to_plot) src_p6.data = new_src 并弄乱height可以使我更接近想要的位置，但是这些条仍然没有对齐：

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

Answer 1

您可以在所有系列或plotOptions中将grouping设置为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/