减少水平条形图中条形之间的间距（chart.js）答案

【问题标题】：Reduce spacing between bars in horizontal bar chart (chart.js)减少水平条形图中条形之间的间距（chart.js）
【发布时间】：2020-09-15 05:36:52
【问题描述】：

我有以下水平条形图

<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>

我想减小一根柱子和另一根柱子之间的间距（不是消除它，只是减小它），但我不知道该怎么做，如果我使用 categoryPercentage 道具，它的作用与barPercentage，只是减小了条本身的大小，而不是每个条之间的距离。

这就是现在的样子

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

【问题讨论】：

stackoverflow.com/questions/34203301/…

标签： javascript chart.js

【解决方案1】：

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

要了解barPercentage 和categoryPercentage 之间的关系，请参阅here。

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

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>

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

【讨论】：