charts - Chart.js : bar spacing in horizontal bar chart

Question

horizontal bar chart

  var barOptions_stacked1 = {
                tooltips: {
                    enabled: true
                },
                hover: {
                    animationDuration: 0
                },
                scales: {
                    xAxes: [{
                            ticks: {
                                beginAtZero: true,
                                fontFamily: "'Open Sans Bold', sans-serif",
                                fontSize: 11
                            },
                            scaleLabel: {
                                display: false
                            },
                            gridLines: {
                            },
                            stacked: true
                        }],
                    yAxes: [{
                            barThickness: 20,
                            gridLines: {
                                display: false,
                                color: "#fff",
                                zeroLineColor: "#fff",
                                zeroLineWidth: 0
                            },
                            ticks: {
                                fontFamily: "'Open Sans Bold', sans-serif",
                                fontSize: 11
                            },
                            stacked: true
                        }]
                },
                legend: {
                    display: true
                },
                pointLabelFontFamily: "Quadon Extra Bold",
                scaleFontFamily: "Quadon Extra Bold"
            };
            var ctx1 = document.getElementById("Chart1");
            var myChart1 = new Chart(ctx1, {
                type: 'horizontalBar',
                data: {
                    labels: ["BU 5", "BU 4", "BU 3", "BU 2", "BU 1"],
                    datasets: [{
                            data: [727, 589, 537, 543, 574],
                            backgroundColor: "rgba(63,103,126,1)",
                            hoverBackgroundColor: "rgba(50,90,100,1)",
                            label: "newly request"
                        }, {
                            data: [238, 553, 746, 884, 903],
                            backgroundColor: "rgba(163,103,126,1)",
                            hoverBackgroundColor: "rgba(140,85,100,1)",
                            label: "in progress"
                        }, {
                            data: [1238, 553, 746, 884, 903],
                            backgroundColor: "rgba(63,203,226,1)",
                            hoverBackgroundColor: "rgba(46,185,235,1)",
                            label: "active"
                        }, {
                            data: [1338, 553, 746, 884, 903],
                            backgroundColor: "rgba(255,169,188,1)",
                            hoverBackgroundColor: "rgba(255,99,132,1)",
                            label: "in approval"
                        }, {
                            data: [1438, 553, 746, 884, 903],
                            backgroundColor: "rgba(136,202,247,1)",
                            hoverBackgroundColor: "rgba(54,162,235,1)",
                            label: "recycle"
                        }, {
                            data: [1538, 553, 746, 884, 903],
                            backgroundColor: "rgba(196,232,116,1)",
                            hoverBackgroundColor: "rgba(152,177,98,1)",
                            label: "reject"
                        }]
                },
                options: barOptions_stacked1
            });

<canvas id="Chart1"></canvas>

如何减少条形之间的间距。
我试过categorySpacing、barValueSpacing...
但没有任何作用!
它在小宽度下看起来不错，但是当全屏宽度时，由于条之间的间距，它的高度会增加。
Canvas 的内联 css 不起作用，因为它被默认 chartjs 覆盖。
此外，我无法在初始化图表时设置图表的高度:
ctx1.canvas.height = 300;
它不起作用!
jsfiddle 链接 link

Answer 1

可以通过设置 来删除条间距bar百分比和 类别百分比 到 1:

yAxes: [{
    barPercentage: 1.0,
    categoryPercentage: 1.0,
}],

然而，条形厚度似乎覆盖了这些设置。我找到的唯一解决方案是将图表的父元素的高度设置为固定值，设置 保持纵横比 选项 假 并删除 条形厚度选项。

注意:我正在使用 angular-chart.js