问题描述
我有以下水平条形图
<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)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!