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

Answer 2

對我有用的是強制畫布的高度：

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

12是條形的高度，12是容納標題和x軸標簽等。您可以刪除maintainAspectRatio：false，barPercentage，categoryPercentage等選項。