本文介绍了减少水平条形图中的条形之间的间距(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>

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

09-05 11:55
查看更多