Chart.js:水平条形图中的条形间距

Question

水平条形图

  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 ...但没有任何作用!它看起来很小,宽度很小,但是当全屏宽度时,由于条之间的间距,它的高度会增加.画布的内联css不起作用,因为它被默认的chartjs覆盖.此外,我无法在初始化图表时设置图表的高度:ctx1.canvas.height = 300; 它不起作用!jsfiddle链接链接

Answer 1

可以通过将barPercentage和categoryPercentage都设置为1 来删除钢筋间距：

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

但是，barThickness似乎会覆盖这些设置。我发现的唯一解决方案是将图表的父元素的高度设置为固定值，将maintainAspectRatio选项设置为false，并删除barThickness选项。

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