Chart.js 如何隐藏特定标签但保留数据？

Question

我在 x 轴上有年份，它是一个像这样的数组

labels = [2020, 2021, 2030, 2035, 2038, 2040, 2050, 2060]

，在 y 轴上我有这个数据

data = [0, 20, 25, 50, 22, 78, 75, 10, 105]

，但我用空字符串替换每年不能被 10 整除的年份。

问题是每个空字符串在标签中仍然有一些“宽度”，它应该被隐藏，但数据应该是可见的。

            <Line
                data={{
                    labels: labels.map(value => value % 10 === 0 ? value : ''),
                    datasets: [
                        {
                            label,
                            data,
                            pointRadius: labels.map(value => value % 10 === 0 ? 2 : 0)
                        }
                    ]
                }}
            />

我正在努力实现这个目标

Answer 1

您可以尝试在

labels

中定义

scales.x.ticks.callback

函数，而不是更改

options

。

< Line
  data = {
    {
      labels,
      datasets: [{
        label,
        data,
        pointRadius: labels.map(value => value % 10 === 0 ? 2 : 0)
      }]
    }
  }
  options = {
    {
      scales: {
        x: {
          ticks: {
            callback: value => value % 10 === 0 ? value : null
          }
        }
      }
    }
  }
/>

有关更多信息，请查看 Chart.js 文档中的

创建自定义刻度格式

。

可以在此sample页面找到运行示例。