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

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

Answer 1

可以通过将 barPercentage 和 categoryPercentage 设置为1来删除条形间距：

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

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

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

Answer 2

对我有用的是强制画布的高度：

document.getElementById("chart1").height = labels.length * 12 + 24;

12是条形图的高度，而12是容纳标题和x轴标签等。您可以删除maintenanceAspectRatio：false，barPercentage，categoryPercentage等选项。