如何更改 chartjs 中 y 轴标签的位置？

Question

我有一个像这样的工作代码link：https://codesandbox.io/s/keen-darkness-x31u7?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.js

我想问一下，有没有办法把yaxes标签的位置改到最上面？（见下面的预期图片）。

我实际上试过下面的代码，但它显示在网格线的中间而不是顶部。

scales: {
    yAxes: [
      {
        ticks: {
          mirror: true,
        },
      },
    ],
}

当前输出：

预期输出：

Answer 1

不要认为这是可能的，据我所知，你可以达到这个目标。

Link: https://codesandbox.io/s/react-chartjs-2-forked-rgiyf?file=/src/index.js

代码：

scales: {
    yAxes: [
      {
        ticks: {
          padding: -30
        }
      }
    ]
  }

有一个解决方法，如果您将 null 值作为数据集中的第一个条目，并在标签数组中放置一个空字符串，您将得到：

Answer 2

镜像其实可以把yaxes标签移到里面。您唯一的问题是向上移动标签，使其不会与 x 网格线相交。而为此，你可以使用 labelOffset 属性来实现它，然后你也可以放一些 padding 来移动标签 a稍微偏离y线。

labelOffset - Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis).

总而言之，您的代码如下所示：

yAxes: [
    {
        ticks: {
            mirror: true,
            padding: -10,
            labelOffset: -10
        }
    }
]

see more props and their definition here

如何更改 chartjs 中 y 轴标签的位置？

How to change position of label of y-axes in chartjs?

chart.js

react-chartjs-2