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

【问题标题】：Recharts XAxis is not showing the date value from tickFormatterRecharts XAxis 未显示来自 tickFormatter 的日期值
【发布时间】：2020-04-18 10:24:28
【问题描述】：

我正在使用 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"));

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

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

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

不是这样的：

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

【讨论】：

【解决方案2】：

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

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

];

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

}

【讨论】：