如何在反应图中更改条形图中的条形宽度？

Question

我正在执行条形图，并且坚持以下几点：

有时候，条形图的宽度太大，看起来像是在与轴重叠时被破坏了。我应该采取什么方法来根据数据来控制钢筋宽度？

这是数据样本以及图形的外观。我还添加了代码沙箱。

const dataOne = [
    {
      label: Translate.string('Events'),
      data: [[2018, 3], [2019, 2], [2020, 1]],
    },
  ];

让我知道是否需要提供其他信息。我已经发布了此问题here also。

Answer 1

该属性实际上存储在scales.xAxes（“ xAxes的选项”表）中。

所以您只需要以这种方式编辑图表：

var options = {
    scales: {
        xAxes: [{
            barPercentage: 0.4
        }]
    }
}

this对于某些参考而言会很好，但尤其要注意this too

Answer 2

深入图书馆之后，我发现在为CSS的{​​{1}}元素计算rect转换时存在一个错误。

我无法找到解决该问题的完整方法，但是我想出了一种解决方法（在数据的开头和结尾添加空值），该解决方案在我的用例中很有效，并且可能会对其他人有所帮助为了解决他们的问题，所以考虑添加解决方法作为答案。

bar