reactjs - Rechart Legend 掩盖了 Mobile 中的图表
问题描述
有没有办法防止 Recharts 中的 Legend 在 Mobile 中隐藏图表?请看下面的图片
<ResponsiveContainer width='100%' aspect={5.0 / 3.0}>
<LineChart data={dataPoints} margin={{ top: 5, right: 10, left: 10, bottom: 5 }}>
<XAxis dataKey="Index" domain={['auto', 'auto']} label={xlabel} />
<YAxis
domain={['auto', 'auto']}
tickFormatter={formatTick}
label={{ value: ylabel, angle: -90, position: 'left' }}
/>
<Tooltip />
<Legend iconType="plainline" />
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
{Object.keys(linesSettings).map((line, index) => {
return <Line
key={index}
dataKey={line}
stroke={linesSettings[line].color}
dot={false}
strokeWidth={linesSettings[line].width}
/>
})}
</LineChart>
</ResponsiveContainer>
解决方案
您可以根据屏幕大小有条件地显示/隐藏图例。基本上,在内部附加一个resize
事件useEffect
并showLegend
在resize
.
代码片段
import React, { useState, useEffect } from "react";
import "./styles.css";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend
} from "recharts";
const data = [
{ name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
{ name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
{ name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
{ name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
{ name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
{ name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
{ name: "Page G", uv: 3490, pv: 4300, amt: 2100 }
];
export default function App() {
const [showLegend, setShowLegend] = useState(true);
useEffect(() => {
function handleResize() {
if (window.innerWidth < 800 && showLegend) {
setShowLegend(false);
} else if (window.innerWidth >= 800 && showLegend === false) {
setShowLegend(true);
}
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, [showLegend]);
console.log(showLegend);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<LineChart
width={600}
height={300}
data={data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
{showLegend && <Legend />}
<Line
type="monotone"
dataKey="pv"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
</div>
);
}
推荐阅读
- docker - 在损坏的系统上备份 docker 卷。卷恢复
- typescript - Ionic 4 路由器没有 navigate 和 navigateByUrl
- elixir - 为什么构造href链接时字符串插值不起作用?
- java - 具有可比接口的通用列表
- python - More efficient way of implement this equation in pytorch (or Numpy)
- lua - LUA:在另一个表中找到值时尝试从表中删除该值
- testing - How to integrate cy.visit(local vs stage url) in a CI environment?
- c# - 无法调试进程内 Web 项目(ASP.NET Core 模块)
- python - for循环中的函数是否被多次调用?
- python - 绘制训练数据的分布