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>

我想缩小一个条形图和另一个条形图之间的间距（不消除它，只是缩小它），但是我不知道该怎么做，如果我使用categoryPercentage道具，它会与barPercentage相同，只是减小了条形图本身的大小，但没有减小每个条形图之间的距离。

这就是现在的样子

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

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

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

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

1 个答案: