减少水平条形图中的条形之间的间距(chart.js) [英] Reduce spacing between bars in horizontal bar chart (chart.js)

问题描述

我有以下水平条形图

<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 大致相同，只是减小了条形本身的大小，但没有减小每个条形之间的距离.

I want to reduce the spacing between one bar and the other (not eliminate it, just reduce it), but I don't know how to do this, if I use the categoryPercentage prop it does about the same as barPercentage, just reduces the size of the bar itself but not the distance between each bar.

这就是现在的样子

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

If possible I would also have the chart in a blank canvas too

推荐答案

条形宽度受选项 barPercentage 和 categoryPercentage ，都需要在数据集上进行定义.

The bar width is influenced through the options barPercentage and categoryPercentage, which both need to be defined on the dataset.

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

To find out about the relationship between barPercentage and categoryPercentage, see here.

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

Please take a look at your amended runnable code below:

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 定义.

In case you simply want to see the existing bars closer to each other, you need to change the height of the chart. This can be done directly on the canvas through the height attribute. Alternatively you may also enclose the canvas in a div that has its dimensions defined by some CSS.

这篇关于减少水平条形图中的条形之间的间距(chart.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！