Javascript 在Recharts的X轴上仅显示年份的两位数

在我的包含日期字符串的Recharts数据图中，X轴看起来相当混乱

是否可以将Recharts配置为仅使用年份的最后2位来标记轴？例如，

17

，

18

，

19

，

20

，每年都不重复标签

import{ResponsiveContainer，LineChart，Line，CartesianGrid，XAxis，YAxis，Tooltip}来自'recharts'；
导出功能图（）{
常数d=[
{日期：'2017-02-01'，价格：231}，
{日期：'2017-04-01'，价格：453}，
{日期：'2017-16-01'，价格：123}，
{日期：'2018-01-01'，价格：234}，
{日期：'2018-04-01'，价格：958}，
{日期：'2018-11-01'，价格：163}，
{日期：'2019-03-01'，价格：293}，
{日期：'2019-10-01'，价格：471}，
{日期：'2020-07-01'，价格：881}，
{日期：'2020-09-01'，价格：122}，
]
返回(
)
}

---

另外一个问题：使用巴斯范德林登的方法，得到的图表非常接近我们所需要的！但是数据点没有沿着X轴正确定位

如果我们使用下面的

d

数组，这一点会更加明显。在结果图表中，您可以看到2018年的数据点在X轴上占据的空间比2017年、2019年和2020年的数据点加起来要大得多。如果勾号标签

17

和

18

之间的间距与勾号标签

18

和

19

之间的间距长度相似，则效果更好

---

你可以这样做：

export function Chart() {
  const [data, setData] = useState([]);
  const d = [
    { date: "2017-02-01", price: 231 },
    { date: "2017-04-01", price: 453 },
    { date: "2017-16-01", price: 123 },
    { date: "2018-01-01", price: 234 },
    { date: "2018-04-01", price: 958 },
    { date: "2018-11-01", price: 163 },
    { date: "2019-03-01", price: 293 },
    { date: "2019-10-01", price: 471 },
    { date: "2020-07-01", price: 881 },
    { date: "2020-09-01", price: 122 },
  ];

  useEffect(() => {
    const datesAlreadyListed = [];
    for (let i = 0; i < d.length; i++) {
      const year = d[i].date.split("-")[0].substring(2, 4);
      if (!datesAlreadyListed.includes(year)) {
        datesAlreadyListed.push(year);
        d[i].year = year;
      }
    }
    setData(d);
  }, []);

  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <Line type="monotone" dataKey="price" stroke="#8884d8" />
        <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
        <XAxis dataKey="year" />
        <YAxis dataKey="price" />
        <Tooltip />
      </LineChart>
    </ResponsiveContainer>
  );
}

导出功能图（）{
const[data，setData]=useState（[]）；
常数d=[
{日期：“2017-02-01”，价格：231}，
{日期：“2017-04-01”，价格：453}，
{日期：“2017-16-01”，价格：123}，
{日期：“2018-01-01”，价格：234}，
{日期：“2018-04-01”，价格：958}，
{日期：“2018-11-01”，价格：163}，
{日期：2019-03-01，价格：293}，
{日期：“2019-10-01”，价格：471}，
{日期：“2020-07-01”，价格：881}，
{日期：“2020-09-01”，价格：122}，
];
useffect（（）=>{
常量DateSalReadyList=[]；
for（设i=0；i

因此，上面的方法是在

useffect

钩子中向

d

添加

year

属性。

year

属性的值取决于在

d

中循环时是否已经遇到日期

如果以前未看到年份值，请将

year

属性设置为该值，使其显示在y轴上

---

---

谢谢，我认为您的解决方案与我们的解决方案非常接近。但是，轴上两位数年份标签之间的间距未正确隔开。更新了问题以提供一个示例来说明这一点。不知道我们是否有一个解决方案可以解决这个问题？

export function Chart() {
  const [data, setData] = useState([]);
  const d = [
    { date: "2017-02-01", price: 231 },
    { date: "2017-04-01", price: 453 },
    { date: "2017-16-01", price: 123 },
    { date: "2018-01-01", price: 234 },
    { date: "2018-04-01", price: 958 },
    { date: "2018-11-01", price: 163 },
    { date: "2019-03-01", price: 293 },
    { date: "2019-10-01", price: 471 },
    { date: "2020-07-01", price: 881 },
    { date: "2020-09-01", price: 122 },
  ];

  useEffect(() => {
    const datesAlreadyListed = [];
    for (let i = 0; i < d.length; i++) {
      const year = d[i].date.split("-")[0].substring(2, 4);
      if (!datesAlreadyListed.includes(year)) {
        datesAlreadyListed.push(year);
        d[i].year = year;
      }
    }
    setData(d);
  }, []);

  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <Line type="monotone" dataKey="price" stroke="#8884d8" />
        <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
        <XAxis dataKey="year" />
        <YAxis dataKey="price" />
        <Tooltip />
      </LineChart>
    </ResponsiveContainer>
  );
}