[英]Parsing JSON Data to Chartjs in React
I have been import JSON files from my MongoDB server through axios.我一直通过 axios 从我的 MongoDB 服务器导入 JSON 文件。 I am able to fetch the data successfully but showing it on chart is not possible.
我能够成功获取数据,但无法在图表上显示。 I ahve seen other answers and it seems easy to store each key column in a seperate variable and then loading to
labels
and data
objects, but this more optimized and Chartjs also allows us this approach as listed in its documentation but I might be going wrong somewhere.我已经看到了其他答案,似乎很容易将每个键列存储在一个单独的变量中,然后加载到
labels
和data
对象,但这更优化,Chartjs 也允许我们使用其文档中列出的这种方法,但我可能会在某个地方出错. In need for help as I need to implement it for my project需要帮助,因为我需要为我的项目实施它
import React, { useState } from 'react';
import axios from 'axios';
import { useEffect } from 'react';
import {Bar, Line} from 'react-chartjs-2';
const URL = process.env.REACT_APP_SERVER_URL || 'http://localhost:5000/';
function ChartRoughPage(props) {
const [historicalData,setHistoricalData] = useState([]);
useEffect(()=>{
axios.get(URL+'stock/BLUEDART')
.then((response)=>{
if(response.status===200){
console.log(response.data)
setHistoricalData(response.data)
}
else{
console.log("ERROR: "+response.status+" , "+response.statusText)
}
})
.catch((err) => console.log.err);
},[]);
return (
<div>
<Line
data={{
datasets:[{
label:'Everyday Chart',
data : historicalData,
parsing:{
xAxisKey:'DATE',
yAxisKey:'CLOSE'
}
}]
}}
/>
</div>
);
}
export default ChartRoughPage;
Output: It just shows a chart with no data
Output:它只是显示一个没有数据的图表
For better understanding here is the link to the documentation: https://www.chartjs.org/docs/latest/general/data-structures.html为了更好地理解这里是文档的链接: https://www.chartjs.org/docs/latest/general/data-structures.html
Also I have tried following things on my code:我还尝试在我的代码上进行以下操作:
...
<Line
data={{
datasets:[{
data : historicalData
}]
}}
options={{
parsing:{
xAxisKey:'Date',
yAxisKey:'Close'
}
}}
/>
...
historicalData = [{Date : '22-02-2000',Close: 56},{Date : '22-03-2000',Close: 656},{Date : '23-05-2000',Close: 6}]
also the documents that I send as JSON from MongoDB is like this is(all the values are accessible by their keys):我从MongoDB作为 JSON 发送的文件也是这样的(所有值都可以通过它们的键访问):
{"_id":{"$oid":"some-object-id"},"Date":"2019-01-03","Symbol":"20MICRONS","Series":"EQ","Prev Close":{"$numberDouble":"44.05"},"Open":{"$numberDouble":"44.05"},"High":{"$numberDouble":"44.1"},"Low":{"$numberDouble":"43.1"},"Last":{"$numberDouble":"43.4"},"Close":{"$numberDouble":"43.45"},"VWAP":{"$numberDouble":"43.48"},"Volume":{"$numberInt":"15741"},"Turnover":{"$numberDouble":"68447485000.0"},"Trades":{"$numberDouble":"368.0"},"Deliverable Volume":{"$numberInt":"9487"},"%Deliverble":{"$numberDouble":"0.6027"}}
Will be grateful for your help!将不胜感激您的帮助!
It seems the issue is in the type of the x-axis, cause if you provide似乎问题出在 x 轴的类型上,因为如果您提供
datasets: [{
data: [{Date : '11',Close: 56},{Date : '22',Close: 656},{Date : '23',Close: 6}],
showLine: true,
fill: false,
borderWidth: 1,
parsing: {
xAxisKey: 'Date',
yAxisKey: 'Close'
},
backgroundColor: 'rgba(255, 99, 132, 1)'
}]
it draws just fine它画得很好
So you should better find how to show time on the x-axis所以你最好找到如何在 x 轴上显示时间
I know I am late, but I have to answer this)我知道我迟到了,但我必须回答这个问题)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.