Remove x-axis label/text in chart.js

阅读时长 4 分钟读完

在使用 Chart.js 时,有时候需要移除 x 轴的标签或文本。这个需求可能出现在一些场景中,比如画出某个数据集的趋势图,但是并不需要展示每个时间点的日期或者其他标签。下面就介绍一种简单易用的方法来实现这个功能。

方法

通过修改 Chart.js 配置项中的 scales 属性,可以移除其中的一个轴上的标签和刻度。具体来说,我们需要设置 display 属性为 false,例如:

-- -------------------- ---- -------
-------- -
  ------- -
    ------ --
      ------ -
        -------- ----- -- -- - -----
      --
      ----------- -
        -------- ----- -- -- - ---
      -
    --
  -
-

这个例子中,我们设置了 x 轴的刻度和标签都不显示。如果只想隐藏其中的一个,那么只需要将另一个属性的值留空即可。比如:

-- -------------------- ---- -------
-------- -
  ------- -
    ------ --
      ------ -
        -------- ----- -- -- - -----
      --
      ----------- -
        -------- ----- -- -- - ---
        ------------ -- -- -------
      -
    --
  -
-

示例代码

以下是一个完整的示例代码,在这个例子中,我们使用 Chart.js 画出了一个简单的柱状图,并移除了 x 轴的标签和刻度。

-- -------------------- ---- -------
--------- -----
------
------
  ------------- ------ ---------- -- ----------------
  ------- -----------------------------------------------------
-------
------
  ------- ----------------------
  --------
    --- --- - ----------------------------------------------------
    --- ----- - --- ---------- -
      ----- ------
      ----- -
        ------- ----------- ----------- -------- -------- ------ ------- --------
        --------- --
          ------ --- ---------
          ----- ---- --- -- -- -- -- ---
          ---------------- ---------- --- ---- ------
          ------------ ---------- --- ---- ----
          ------------ -
        --
      --
      -------- -
        ------- -
          ------ --
            ------ -
              -------- ----- -- -- - -----
            --
            ----------- -
              -------- ----- -- -- - ---
            -
          ---
          ------ --
            ------ -
              ------------ ----
            -
          --
        -
      -
    ---
  ---------
-------
-------

结论

通过上述方法,可以轻松地移除 Chart.js 图表中 x 轴的标签和刻度。这个技巧在绘制一些不需要展示具体值的图表时,可以帮助我们更好地展示数据趋势。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/30367

纠错
反馈