减少图表js条形图中条形之间的间隙

Question

我正在将 Chartjs 用于我的 React 项目。我创建了一个条形图，我想减少条形之间的差距。我也尝试使用“barPercentage”和“categoryPercentage”。但这没有用。我把我的代码放在下面。请提及我做错了什么或提出一个选择。

const data = {
    labels: ["Apple", "Orange", "Grapes", "Banana", "Kiwi"],
    datasets: [{
      data: [20, 50, 30, 35, 30, 20],
      barPercentage: 1.0,
      categoryPercentage: 1.0,
      backgroundColor: ['#B2DED4', '#81CAB8', '#81CAB8', '#4FB59D', '#2BA489'],
      borderColor: '#707070',
      borderWidth: 1,
      barThickness: 16,
      borderRadius: 10,
    }],
  }

  const options = {
    scales: {
      y: {
        title: {
          display: true,
        },
        grid: {
          display: true,
        },
      },
      x: {
        title: {
          display: true,
        },
        grid: {
          display: false,
        }
      }
    },
    plugins: {
      legend: {
        display: false,
      },
      datalabels: {
        display: false
      }
    },
  }

<Bar data={data} options={options} />

Answer 1

唯一的问题是因为您在

barThickness

选项中指定了

dataset

，这会阻止

barPercentage

生效。只需将其删除并将

barPercentage

配置为您喜欢的任何数量，在这种情况下您不需要

categoryPercentage

。

const data = {
    labels: ["Apple", "Orange", "Grapes", "Banana", "Kiwi"],
    datasets: [{
      data: [20, 50, 30, 35, 30, 20],
      barPercentage: 1.0,
      // categoryPercentage: 1.0,
      backgroundColor: ['#B2DED4', '#81CAB8', '#81CAB8', '#4FB59D', '#2BA489'],
      borderColor: '#707070',
      borderWidth: 1,
      // barThickness: 16,
      borderRadius: 10,
    }],
  }

希望这能有所帮助！

Answer 2

我知道已经有一段时间了，但就像@Anh Tran 所说，问题在于条形厚度。但是，如果您想消除条形之间的间隙，您仍然需要将类别百分比设置为 1.0。

这是文档的链接：https://www.chartjs.org/docs/latest/charts/bar.html#barpercentage-vs-categorypercentage