减少水平条形图中条形之间的间距 (chart.js)

Question

我有以下水平条形图

<template>
<div>
   <canvas id="myChart" width="100" height="100"></canvas>
</div>
</template>

<script>
import Chart from 'chart.js';
export default {
    data() {
        return {
            ctx: null,
            chart: null,
        }
    },

    mounted() {
        this.ctx = document.getElementById('myChart');
        this.chart = new Chart(this.ctx, {
            type: 'horizontalBar',
            data: {
                labels: ['1', '2', '3', '4', '5'],
                datasets: [{
                    categoryPercentage: 0.4,
                    label: 'Stars',
                    data: [15, 28, 34, 48, 100],
                    backgroundColor: [
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',

                    ],
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true,
                        categoryPercentage: 0.4
                    }]
                }
            }
        });
    }
}
</script>

我想减少一个条与另一个条之间的间距（不是消除它，只是减少它），但我不知道如何做到这一点，如果我使用 prop，categoryPercentage它的作用与 大致相同barPercentage，只是减小了条本身，而不是每个条之间的距离。

这就是现在的样子

如果可能的话，我也会将图表放在空白画布上

Answer 1

条形宽度受选项barPercentage和 的categoryPercentage影响，这两个选项都需要在数据集上定义。

要了解barPercentage和之间的关系categoryPercentage，请参见此处。

请查看下面修改后的可运行代码：

new Chart('myChart', {
  type: 'horizontalBar',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      barPercentage: 0.9,
      categoryPercentage: 1,
      label: 'Stars',
      data: [15, 28, 34, 48, 100],
      backgroundColor: [
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)'
      ],
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

如果您只是想查看现有的条形图彼此更接近，则需要更改图表的高度。canvas这可以直接通过属性来完成height。或者，您也可以将 包含canvas在 a 中div，其尺寸由 some 定义CSS。