守著星空守著你
2023-07-20 16:24:44
你好,我有一個折線圖,我應該在其中顯示動態數據,如果他們不向我傳遞數據,那只是一條直線。我遇到的問題是我不知道如何將道具傳遞給折線圖var data `[{ "name": "Samantha White", "id": "484567489sda", "address": "4116 Barton Creek Boulevard Austin, TX 78735 USA", "logo": "https://sssssss.s3.amazonaws.com/ssss/express.png", "occupancy": { "capacity": 150, "occupancy": 0, "percentage": 0 }, "alerts": { "conglomerations": 0, "occupancy": 0 }, "visits": 2721 "plot": [] }, { "name": "Jacqueline Wells", "id": "sdasdx45616a4dsa5", "address": "s15035 Highview Road Grand Junction, CO 81504 USA", "store_logo": "ssssss.s3.amazonaws.com/ssss/lider.png", "occupancy": { "capacity": 150, "occupancy": 0, "percentage": 0 }, "alerts": { "conglomerations": 0, "occupancy": 0 }, "visits": 2069, "plot": [9, 29, 48, 52, 88, 107, 130, 127, 122, 157, 165, 172, 211, 214, 267, 296, 331, 353, 371, 381] }]`;function App() { const [tiendas, setTiendas] = useState(JSON.parse(data)); const [showTiendas, setShowTiendas] = useState(false) useEffect(() => { setTiendas(JSON.parse(data)); }, []); return ( <div className="w-full "> <Menu showTiendas={setShowTiendas} menuData={tiendas} tiendasSet={setTiendas} /> {showTiendas && tiendas.map((tienda) => ( <Card key={Math.random()} {...tienda}></Card> ))} </div> );}export default App;圖表的數據將是plot,在卡組件中我命令調用圖表,這將是圖表的代碼,我不知道如何從圖表發送調用plot,現在圖表有隨機數import React, { useState } from "react";import { scaleLinear, scaleBand } from "d3-scale";import Line from "./Line";import { line, curveMonotoneX } from "d3-shape";import { extent } from "d3-array";function Chart(props) { const [data, setData] = useState( [ Math.random()*30, Math.random()*30, Math.random()*30, Math.random()*30, Math.random()*30, Math.random()*30, Math.random()*30, ] ); const parentWidth = 125; const margins = { top: 20, right: 20, bottom: 20, left: 20 };
2 回答

慕的地8271018
TA貢獻1796條經驗 獲得超4個贊
我不太理解您的代碼片段,但您可以按照與菜單相同的方式將數據傳遞到圖表。
<Chart data={data} />
然后在您的圖表組件中,您將能夠通過 props.data 訪問該數據

GCT1015
TA貢獻1827條經驗 獲得超4個贊
我假設您的組件 Chart 位于 Card 組件內。首先,你正在這樣做:
{showTiendas && tiendas.map((tienda) => (
<Card key={Math.random()} {...tienda}></Card>
))}
然后,在 Card 組件中你應該有這樣的內容:
function Card(props) {
const { plot } = props;
...
return (
<Chart plot={plot}/> // you should pass the plot data to the Chart component like this
)
...
最后,在圖表組件中,您應該能夠從中獲取數據,props如下所示:
function Chart(props) {
const { plot } = props;
此外,您在第一個數組對象(屬性之前)中缺少逗號plot。
添加回答
舉報
0/150
提交
取消