charts - 条形图chartjs的线性x轴

Question

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

我已经成功地使用这个选项在这里创建了几乎相似的规模。

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

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

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

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

Answer 1

我不建议将轴类型更改为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