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();

}