时间戳

首页 > 解决方案 > 减少水平条形图中条形之间的间距（chart.js）

javascript - 减少水平条形图中条形之间的间距（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，只是减少了条本身，但不是每个条之间的距离。

这就是现在的样子 在此处输入图像描述

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

标签： javascriptchart.js

解决方案

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

要了解 and 之间的关系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>

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

推荐阅读