如何在Chart.js中的Horizo ntalBar中更改列之间的空间？

Question

这是我的horizo​​ntalBar：

选项：

option = {
    legend: {
      display: true
    },
    scales: {
      yAxes: [{
        beginAtZero: true,
        fontSize: 20,
        display: true,
        barThickness: 8,
      }],
      xAxes: [{
        fontSize: 20,
        gridLines: {
          display: false
        }
      }]
    }
  }

和数据集：

this.ChartData = [
      { data: [this.worstRatingValues[0], 0], label: this.worstRatingKeys[0], borderWidth: 2 , borderColor: 'rgba(255, 255, 255)', backgroundColor: 'rgba(18, 151, 46,  0.6)', hoverBackgroundColor:  'rgba(18, 151, 46,  1)', hoverBorderColor:'rgba(255, 255, 255, 1)',  },
      { data: [0, this.worstRatingValues[1]], label: this.worstRatingKeys[1], borderWidth: 2, borderColor: 'rgba(255, 255, 255)', backgroundColor: 'rgba(41, 201, 255, 0.6)', hoverBackgroundColor: 'rgba(41, 201, 255, 1)' ,hoverBorderColor:'rgba(255, 255, 255, 1)', },
      { data: [0, 0, this.worstRatingValues[2]], label: this.worstRatingKeys[2], borderWidth: 2, borderColor: 'rgba(255, 255, 255)', backgroundColor: 'rgba(255, 15, 235, 0.6)', hoverBackgroundColor: 'rgba(255, 15, 235, 1)', hoverBorderColor:'rgba(255, 255, 255, 1)', },
      { data: [0, 0, 0, this.worstRatingValues[3]], label: this.worstRatingKeys[3], borderWidth: 2, borderColor: 'rgba(255, 255, 255)', backgroundColor: 'rgba(35, 255, 15, 0.6)', hoverBackgroundColor: 'rgba(35, 255, 15, 1)', hoverBorderColor:'rgba(255, 255, 255, 1)', },
      { data: [0, 0, 0, 0, this.worstRatingValues[4]], label: this.worstRatingKeys[4], borderWidth: 2, borderColor: 'rgba(255, 255, 255)', backgroundColor: 'rgba(243, 255, 15, 0.6)', hoverBackgroundColor: 'rgba(243, 255, 15, 1)' , hoverBorderColor:'rgba(255, 255, 255, 1)',},
      { data: [0, 0, 0, 0, 0, this.worstRatingValues[5]], label: this.worstRatingKeys[5], borderWidth: 2, borderColor: 'rgba(255, 255, 255)', backgroundColor: 'rgba(255, 128, 31, 0.6)', hoverBackgroundColor: 'rgba(255, 128, 31,  1)' , hoverBorderColor:'rgba(255, 255, 255, 1)',},

    ];

我知道我可以使用barThickness更改柱的厚度。但结果是：

所以并非所有列都是可见的。如何减少列之间的间距？

Answer 1

您可以尝试在y轴选项上设置barPercentage和categoryPercentage属性。更多信息here。

scales: {
  yAxes: [{
    beginAtZero: true,
    fontSize: 20,
    display: true,
    barThickness: 8,
    categoryPercentage: 1,
    barPercentage: 1
  }],
  ...

值1和1将删除所有空格。试玩以达到您的最佳需求。