如何解决在图表的 X 轴上仅显示年份的 2 位数字
在我的包含日期字符串的数据图表中，X 轴看起来很混乱。
是否可以将 Recharts 配置为仅使用年份的最后 2 位数字来标记轴？例如，var firebaseConfig = {
apiKey: "xxxx",authDomain: "xxxx",projectId: "xxxx",storageBucket: "xxxx",messagingSenderId: "xxxxx",appId: "xxxx",measurementId: "xxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics().logEvent('admin',{ name: 'homepage'});
、17、18、19 无需重复每年的标签。
20附加问题：使用 Bas van der Linden 的方法，生成的图表非常接近我们所需要的！但数据点未沿 X 轴正确定位。
如果我们使用下面的 import { ResponsiveContainer,LineChart,Line,Cartesiangrid,XAxis,YAxis,Tooltip } from 'recharts';
export function Chart() {
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},]
return (
<ResponsiveContainer width="100%" height={400}>
<LineChart data={d}>
<Line type="monotone" dataKey="price" stroke="#8884d8" />
<Cartesiangrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="date" />
<YAxis dataKey="price" />
<Tooltip />
</LineChart>
</ResponsiveContainer>
)
}
数组，这会变得更加明显。在生成的图表中，您可以看到 2018 年的数据点在 X 轴上占据的空间比 2017、2019 和 2020 年的数据点加起来要多得多。如果刻度标签 d 和 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>
);
}
所以上面的方法是在 year 钩子内向 d 添加一个 useEffect 属性。 year 属性的值取决于循环遍历 d 时是否已遇到日期。
如果之前没有看到年份值，请将 year 属性设置为此值，以便它显示在 y 轴上。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。