chartjs中如何控制条形图的宽度？

Question

我使用chartjs 的条形图中的条形太宽了。我怎样才能让它们变薄？ 这是我的代码

const ctx = document.getElementById('myChart');

新图表(ctx, { 类型：'酒吧'， 数据： { 标签：['男性'，'女性']， 数据集：[{ label: '按性别划分的学生注册', 数据： [， ]， 边框宽度：1， 背景颜色: ['rgb(54, 162, 235)', 'rgb(255, 99, 132)' ] }] } });

我尝试了 Chartsjs.org 上的许多选项，但没有一个能解决我的问题。

Answer 1

对于您的图表，您可以在选项块中指定 barThickness 值，例如

,options: {
   barThickness:50
    }

所以改变

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

const ctx = document.getElementById('myChart');
new Chart(ctx, 
  { type: 'bar', 
  data: { labels: ['Males', 'Females'], 
  datasets: 
  [{ label: 'Students Registrations by Gender', 
  data: [100,200 ], 
  borderWidth: 1, 
  backgroundColor: 
  ['rgb(54, 162, 235)', 'rgb(255, 99, 132)' ] }] } 
}
  );
</script>

到

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

const ctx = document.getElementById('myChart');
new Chart(ctx, 
  { type: 'bar', 
  data: { labels: ['Males', 'Females'], 
  datasets: 
  [{ label: 'Students Registrations by Gender', 
  data: [100,200 ], 
  borderWidth: 1, 
  backgroundColor: 
  ['rgb(54, 162, 235)', 'rgb(255, 99, 132)' ] }] } 

,options: {
   barThickness:50
    }

}
  );

</script>