javascript 删除react chart js中条形图和轴之间的间隙

cunj1qz1  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(129)

我想删除左右条形图和y轴之间的间隙/空间。仍然没有弄清楚处理这个问题的图表js中的选项。如果我使用barPercentage和categoryPercentage选项,它会使中心的间隙消失,所以它不期望,我只希望左右差距被删除。
image-example-one
image-example-two
删除条形图和左右y轴之间的间隙/空间

pkwftd7m

pkwftd7m1#

要删除Chart.js中条形图和y轴之间差距/空间,可以使用图表配置中的barThickness和maxBarThickness选项。
barThickness选项设置每个条形的粗细(以像素为单位),maxBarThickness选项设置每个条形的最大粗细(以像素为单位)。将这两个选项的值都设置为1将删除条形与y轴之间的任何间隙。

const options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }],
    xAxes: [{
      barThickness: 1,
      maxBarThickness: 1
    }]
  }
};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgba(255, 99, 132, 1)',
    borderWidth: 1
  }]
};

const chart = new Chart('myChart', {
  type: 'bar',
  data: data,
  options: options
});

在上例中,x轴的barThickness和maxBarThickness选项设置为1,这将删除条形与y轴之间的任何间隙。请注意,您可能需要调整值1以适应特定的图表布局和设计。

相关问题