我的React有点新手，我试着用重排图表做一个图表，但我迷失在一个问题上，图表的线条看不到。
我使用这个代码
const [ graphData, setgraphData ] = useState([])
const createMockData = () => {
let data = [];
let value = 50;
for (var i = 0; i <= 5 ; i++){
let date = new Date();
date.setHours(0,0,0,0);
date.setDate(i);
value += Math.round((Math.random() < 0.5 ? 1 : 0) * Math.random() * 10);
data.push({x: date, y: value});
}
//console.log(data);
setgraphData(data);
}
useEffect(() => {
createMockData();
});创建模型数据并使用此命令显示该数据
<LineChart width={500} height={200} data={graphData}>
<Line type="monotone" dataKey={graphData.x} stroke="var(--mainColor)" />
<XAxis dataKey={graphData.y} />
<Tooltip />
</LineChart>我不知道我做错了什么。当我使用普通数组时，它工作得很好，但我需要图形类似于100个值。
谢谢
2条答案
按热度按时间mcdcgff01#
这里有四个问题：
1.您正在将
graphData.x和graphData.y设置为键，但这些值将是undefined。graphData是一个数组，没有x或y属性-它甚至没有意义，因为您应该为每个对象指定要使用的属性名称，即"x"和"y"。在您的工作图中可以看到，您有数据对象{ Time, Value }，因此指定的键是"Time"和"Value"，现在您有了{ x, y }，所以它们应该是"x"和"y"。1.您颠倒了
x和y-您正在尝试将x设置为Line的密钥，并将y设置为XAxis的密钥，但需要反过来设置。1.数据中有
Date对象，这些对象碰巧在X轴上“工作”，因为它们被隐式转换为字符串，但输出的可读性不是很好，而且它也不是一种真正支持的提供X轴值的方式。最好在数据对象中设置x: date.toLocaleDateString()，而不是只设置x: date。1.您的模拟数据当前将在无限的紧密循环中重新创建，在该过程中消耗一个CPU核心，因为您将
createMockData放入useEffect中，但没有指定空的依赖项数组，因此任何重现器--包括您在createMockData中触发的那个重现器--都将创建新的模拟数据，这将导致创建新的模拟数据，依此类推。解决方案是添加一个空的依赖项数组，以指定在任何情况下钩子都不应该第二次运行。工作沙箱here。
gc0ot86w2#
要使其正常工作，您需要解决两个问题：
1.您的
useEffect应该有一个空的依赖项数组，以防止无休止的重新渲染。1.
dataKey={graphData.x}应替换为dataKey="x"，dataKey={graphData.y}应替换为dataKey="y"查看the sandbox link以查看工作示例