[英]Display User info from Meteor.users, and display with Highcharts
我是Meteor的新手,這就是我想做的事情:我有一些用戶將回答不同類型的問題: 感覺和答案是我將存儲在mongoDB中的每個用戶的答案。 現在這是我的HTML:
<p>Select a user to see infos, see answers' progress</p>
{{#each allUsers}}
<div class="patinf">
<br>
<h5><i class="fa fa-user"></i> {{lastName}} {{firstName}}</h5>
<label>
<input type="radio" class="radio-inline" name="{{this.id}}" id="show" value="show" required>
<span><i class="fa fa-bar-chart" aria-hidden="true"></i> Show answers</span>
</label>
<label>
<input type="radio" class="radio-inline" name="{{this.id}}" id="hide" value="hide" checked>
<span><i class="fa fa-times" aria-hidden="true"></i> Hide</span
</label>
</div>
{{#if show}}
<div class="form-group">
<label for="something" class="control-label">Answers' Progress</label>
<div id="something">
<p>Feelings:</p>
<ul>
{{#each allFeelings}}
<li>{{feel}}</li>
{{/each}}
</ul>
<p>Answers:</p>
<ul>
{{#each allAnswers}}
<li>{{answer}}</li>
{{/each}}
</ul>
<br>
</div>
<div id="something" style=" min-width: 310px; height: 400px; margin: 0auto">
{{> highchartsHelper chartId="feels" chartWidth="100%" charHeight="100%" chartObject=topGenresChart}}
<br>
{{> highchartsHelper chartId="answers" chartWidth="100%" charHeight="100%" chartObject=topGenresChart}}
</div>
</div>
{{/if}}
{{/each}}
這是我的js文件:
Meteor.subscribe('patientInfos');
Template.patients.helpers({
allAnswers:function(){
return Quests.find({"answer": {$ne:null}});
},
answer: function(){
return this.answer;
}
});
Template.patients.helpers({
allFeelings:function(){
return Quests.find({"feel": {$ne:null}});
},
feel: function(){
return this.feel;
}
});
Template.patients.helpers({
allUsers: function() {
return Meteor.users.find({});
},
id: function(){
ret
},
firstName: function() {
return this.profile.firstName;
},
lastName: function() {
return this.profile.lastName;
}
});
Template.patients.onRendered(function () {
Session.set('show', false);
});
Template.patients.events({
'change #hide': function (event) {
Session.set('show', false);
},
'change #show': function (event) {
Session.set('show', true);
}
});
Template.patients.helpers({
show: function() {
return Session.get('show');
},
});
Template.patients.topGenresChart = function() {
return {
chart: {
type: 'areaspline'
},
title: {
text: 'Answers Progress'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'W1',
'W2',
'W3',
'W4',
'W5',
'W6',
'W7'
],
plotBands: [{ // last week
from: 5.5,
to: 7,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Answers'
},
categories: [
'0',
'1',
'2',
'3',
'4',
'5',
'6'
],
},
tooltip: {
shared: true,
valueSuffix: ' points'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Question 1 Progress',
data: [3, 4, 3, 5, 1, 5, 6]
}, {
name: 'Question 2 Progress',
data: [1, 3, 2, 3, 2, 5, 4]
}]}
};
現在的問題是,如何將來自Quests.answer的數據放入series.data中,考慮到答案是一個由10個數字組成的數組。 如何使用#each函數同時顯示一個用戶的答案數據:實際上,如果我選擇show,我將在每個用戶下看到所有用戶的答案。
任務就像:
Schemas.Quests = new SimpleSchema
createdAt:
type: Date
autoValue: ->
if this.isInsert
new Date()
answer:
type: [Number]
optional:true
feel:
type: Number
optional:true
userId:
type: String
patient:
type: String
optional:true
感覺可能是數字:0 1 2.答案是一個由10項組成的數組,數字從0到6。
編輯:
MongoDB元素示例:-Meteor.users
createdAt: Tue Dec 05 2017 10:56:24 GMT+0100
__proto__: Object
emails : Array(1)
0 : {address: "denise@test.it", verified: false}
length : 1
__proto__ : Array(0)
profile :
firstName : "Denise"
lastName : "Blabla"
__proto__ : Object
services :
password: {bcrypt: "$2a$10$ddJ8F.k2uJ2lZaDfvMNEdObxdMXwAdxSSQRYtHRG6Juoh8HVtC8Ju"}
resume : {loginTokens: Array(0)}
__proto__ : Object
_id: "RTS2LR2jaBjidEiB7"
__proto__:Object
length : 4
__proto__: Array(0)
這是任務的一個示例:
0 :
answer : (10) ["1", "5", "6", "5", "1", "5", "5", "6", "0", "2"]
patient : "Denise Blabla"
userId : "RTS2LR2jaBjidEiB7"
_id : "7NwjGmGyz7zjbzBqC"
__proto__ : Object
1 :
feel : "0"
patient : "Denise Blabla"
userId : "RTS2LR2jaBjidEiB7"
_id : "5KtDQof3o9gt8CYJg"
__proto__ : Object
2 :
answer : (10) ["0", "4", "4", "0", "4", "5", "0", "1", "3", "6"]
patient : "Denise Blabla"
userId : "RTS2LR2jaBjidEiB7"
_id : "7t46pAihMBNWwmYpN"
__proto__ : Object
我想要在表中顯示如下內容:
Denise Blabla
Week || Q1 || Q2 || ... || Q10 || Feel
Week 1 || 6 || 4 || ... || 1 || 0
Week 2 || 3 || 1 || ... || 5 || 2
Anne Smith
Week || Q1 || Q2 || ... || Q10 || Feel
Week 1 || 5 || 5 || ... || 1 || 1
Week 2 || 3 || 2 || ... || 3 || 0
問題的第一部分,顯示模板中相關集合Quests
的數據:
Template.patients.helpers({
allAnswers() {
return Quests.find({ userId: this._id, answer: { $exists: true }}).map((el) => el.answer);
},
allFeelings() {
return Quests.find({ userId: this._id, feel: { $exists: true }}).map((el) => el.feel);
}
});
這基本上是做上使用相關集合內嵌加入 userId
作為匹配鍵。
您的高級圖表將以類似的方式完成:
Template.patients.topGenresChart = function() {
return {
... chart parameters as you had them before
series: [{
name: 'Question 1 Progress',
data: () => { Quests.find({ userId: this._id, answer: { $exists: true }}).map((el) => el.answer)}
}, {
name: 'Question 2 Progress',
data: () => { Quests.find({ userId: this._id, feel: { $exists: true }}).map((el) => el.feel)}
}]}
};
然而:
answer
是由10個數字組成的數組,但是您的模式已將其定義為String
。 您是說[String]
嗎? feel
是一個數字0 1 2
但是您的模板正在{{#each}}
迭代。 Quests
應該將哪些數據放入其中? {{> highchartsHelper ...}}
chartObject=topGenresChart
兩次-這意味着您將兩次顯示完全相同的圖表,即使您給每個ID都不同。 你的意圖是什么? 無論如何,答案應該給您足夠的動力。
另請注意,您的feel
和answer
幫助者是多余的。 您可以直接在模板中使用{{feel}}
和{{answer}}
而不使用幫助器,因為這些幫助器僅分別返回this.feel
和this.answer
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.