如何更改 Chart.js 中的水平条中的列之间的空间？答案

【问题标题】：How to change space between columns in horizontalBar in Chart.js?如何更改 Chart.js 中的水平条中的列之间的空间？
【发布时间】：2020-05-15 15:12:25
【问题描述】：

这是我的水平条：

选项：

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 更改列的厚度。但结果是：

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

【问题讨论】：

标签： angular chart.js bar-chart

【解决方案1】：

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

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

值 1 和 1 将删除所有空间。尝试使用它以达到您的要求的最佳状态。

【讨论】：