Recharts XAxis 未显示来自 tickFormatter 的日期值

Question

我正在使用 recharts 显示格式化date值是 x 轴标签，但它不起作用我尝试使用tickFormatter但它没有显示转换后的日期。

import React from "react";
import { render } from "react-dom";
import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";

const styles = {
 fontFamily: "sans-serif",
 textAlign: "center"
};

const data = [
 { quarter: new Date(), earnings: 13000 },

];

const formatXAxis = (tickItem) => {
  return tickItem.toLocaleDateString();
}

const App = () => (
 <div style={styles}>
  <h1>Recharts basic demo</h1>
  <BarChart width={500} height={300} data={data}>
  <XAxis dataKey="quarter" tickFormatter="{formatXAxis}"/>
  <YAxis dataKey="earnings" />
  <Tooltip/>
  <Bar dataKey="earnings" />
 </BarChart>
</div>
);

render(<App />, document.getElementById("root"));

Answer 1

你不应该用引号包裹tickFormatter值，它应该是这样的：

 <XAxis dataKey="quarter" tickFormatter={formatXAxis}/>

不是这样的：

<XAxis dataKey="quarter" tickFormatter="{formatXAxis}"/>

Answer 2

你应该首先转换new Date()为String

 const data = [
 { quarter: new Date().toLocaleDateString(), earnings: 13000 },

];

const formatXAxis = (tickItem) => {
  return tickItem.toString();

}