条形图chartjs的线性x轴

问题描述

我正在使用 chartjs 2.9.3。我想为条形图的 x 轴设置线性比例。它应该像表示负值、十进制值、正值的线图的任何线性刻度一样工作。

我已经设法使用此选项创建了几乎相似的比例 here。

 scales: {
    xAxes: [
      {
        type: "time",time: {
          parser: "Y",unit: "year",displayFormats: {
            year: "Y"
          }
        },}
    ]
  },

但它不适用于十进制值，当数据集具有负 x 值时，它只是四舍五入为整数并将条形放置在该位置。

如何也可以表示十进制值？

Chartjs >=3.0.0 为条形图引入了线性标度。但是这个版本还有一些其他的错误，所以我坚持使用 2.9.3 版本

解决方法

我不建议将轴类型更改为 time，因为鉴于没有“小数时间”，这会引入其他几个问题。添加对它的支持并不容易。

最好的办法是使用自定义函数创建自己的标签。例如：

    const f = () => {
      let a = [];
      for (let n = -30; n <= 30; n++) {
        a.push(n / 100 + "");
      }
      return a;
    };

生成从 -3.00 到 +3.00（零代表小数位）。数字 30 和 100 越大，线性标度的“分辨率”就越大。

演示：https://codesandbox.io/s/react-chartjs-2-example-forked-26bbx?file=/src/index.js