试图将我的MongoDB集合显示在我的ChartJS上,但似乎无法使其正常工作 . 我是ChartJS和MongoDB的新手 . 我想将文档值显示为图表的“数据”,将文档Time显示为X轴 . 我已经在这个网站上尝试了各种答案,例如
Meteor Collection not displaying in Mongo show collections
让我靠近(如:没有应用程序崩溃),但我仍然缺少一些东西..有人可以对此有所了解吗?
我的收藏:
{ "_id" : "344nfnk3rjn3j4nj",
"sensorName" : "Temperature",
"sensorValue" : "29",
"createdAt" : "12/09/2018 10:29:08 AM" }
chart.js之
import React, { Component } from 'react';
import {Line} from 'react-chartjs-2';
import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';
import { GrowData } from "../api/growdata.js";
Meteor.startup(() => {
Tracker.autorun(() => {
let growdata = GrowData.find({},{fields: {sensorValue: 1, createdAt: 1}}).fetch()
let labels = growdata.map(function(sensor) { return sensor.createdAt; })
let sensdata = growdata.map(function(sensor) {return sensor.sensorValue; })
const Chart = (props) => {
const data = {
labels: labels,
datasets: [{
label: "Temperature",
backgroundColor: 'rgba(255, 128, 0, 0.3)',
borderColor: 'rgba(255, 128, 0, 0.3)',
fill: false,
data: sensdata
},
{
label: "tMin",
backgroundColor: 'rgba(255, 128, 0, 0.3)',
borderColor: 'rgba(255, 128, 0, 0.4)',
borderDash: [2],
fill: '-1',
data: [25, 25, 25, 25, 25, 25, 25]
},
]
};
const options = {
title: {
display: true,
text: "Chart Data",
fontFamily: "Roboto",
fontSize: 20,
}
}
return (
<Line data={data} options={options} />
)
}
export default Chart;
我尝试在单独的变量中更改查找查询,然后像以前一样在“标签”中调用它:
let growdataTime = GrowData.find({}).fetch({createdAt: Date().toString()});
其中显示了createdAt文档,但它显示在图表上方..?
我已经使用以下内容在另一个组件中正常显示(不在图表上)数据:
App.js
class App extends Component {
renderData() {
return this.props.growdata.map(sensor => (
<Sensdata key={sensor._id} sensor={sensor} />
));
}
Sensdata.js
export default class Sensdata extends Component {
render() {
return (
<li>
{this.props.sensor.sensorName} - {this.props.sensor.sensorValue} -
{moment(this.props.sensor.createdAt).format("L LTS")}
</li>
);
}
}
但我似乎无法在Chart.js中复制这个 . 老实说,我想我已经尝试了很多不同的变化,我甚至不知道从哪里开始 . 我确信有一些经验丰富的人会发现的基本错误,我试图不提这个问题,但我不知道在这一点上还有什么可以看的 . 任何建议将不胜感激 .