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等选项。