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

问题描述

我有一个类似于此链接的工作代码：https://codesandbox.io/s/keen-darkness-x31u7?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.js

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

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

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

---

电流输出：

预期输出：

解决方法

镜子实际上可以将 yaxes 标签移动到内部。您唯一的问题是向上移动标签，使其不会与 x 网格线相交。为此，您可以使用 labelOffset 属性来实现它，然后您还可以放置一些 padding 将标签从 y 线移动一点。

labelOffset - 标签与刻度中心点的偏移距离（以像素为单位）（x 轴为 x 方向，y 轴为 y 方向）。

总的来说，您的代码如下所示：

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

see more props and their definition here

,

不要认为这是可能的，据我所知，你能做到的就是这个。

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

代码：

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

对此有一个解决方法，如果您将 null 值作为数据集中的第一个条目并在标签数组中输入一个空字符串，您将得到以下信息：