我從 API 端點獲取價格變化資料,我從 axios 收到此回應
0: (2) [1639382650242, 48759.49757943229]
1: (2) [1639386250855, 49131.24712464529]
2: (2) [1639389730718, 48952.65930253478]
3: (2) [1639393442318, 48821.67463307133]
4: (2) [1639396908986, 48835.214009032316]
5: (2) [1639400493105, 48618.25814914513]
6: (2) [1639404186695, 48572.06354948456]
7: (2) [1639407821756, 47974.48879991822]
8: (2) [1639411648037, 47105.42054562465]
9: (2) [1639414998352, 47176.56337927206]
我嘗試使用檔案中的這個示例代碼來呈現一個簡單的折線圖,但它說我必須至少有 2 列資料:
<Chart
width={'600px'}
height={'400px'}
chartType="Line"
loader={<div>Loading Chart</div>}
data={
historicData.prices
}
/>
有沒有辦法讓它與 google-react-charts 一起作業?
uj5u.com熱心網友回復:
將time和price作為標簽添加到第一個條目。您可以將時間戳轉換為實際日期物件。
export default function App() {
const data = [
[1639382650242, 48759.49757943229],
[1639386250855, 49131.24712464529],
[1639389730718, 48952.65930253478],
[1639393442318, 48821.67463307133],
[1639396908986, 48835.214009032316],
[1639400493105, 48618.25814914513],
[1639404186695, 48572.06354948456],
[1639407821756, 47974.48879991822],
[1639411648037, 47105.42054562465],
[1639414998352, 47176.56337927206]
];
const processedData = [[{ type: "date", label: "time" }, "price"]].concat(
data.map(([timestamp, price]) => {
return [new Date(timestamp), price];
})
);
return (
<div className="App">
<Chart
width={"600px"}
height={"400px"}
chartType="Line"
loader={<div>Loading Chart</div>}
data={processedData}
/>
</div>
);
}
代碼沙箱 => 
請檢查您是否按照上圖在資料部分錯過了此標簽?
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/394565.html
標籤:javascript 反应 图表 下一个.js
上一篇:@之后的電子郵件域的正則運算式
