Javascript 显示Meteor.users中的用户信息,并使用Highcharts显示

Javascript 显示Meteor.users中的用户信息,并使用Highcharts显示,javascript,mongodb,meteor,highcharts,Javascript,Mongodb,Meteor,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"&

我是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}}
现在的问题是如何将从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
feel可能是一个数字:0 1 2。 答案是一个由10项组成的数组,数字从0到6

编辑:

MongoDB元素的示例: -流星用户

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

问题的第一部分,显示模板中相关收集任务的数据:

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作为匹配键在相关集合上进行内联连接

您的highchart将以类似的方式完成:

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)}
    }]}
};
然而:

在您的问题中,您说答案是一个由10个数字组成的数组,但您的模式将其定义为一个字符串。你是说[字符串] 您说feel是一个数字0 1 2,但您的模板正在使用{{each}对其进行迭代。 在你的两个系列中,你到底想画什么,一点也不清楚。您的示例数据有7个元素的数组,但任务中的哪些数据应该放在其中? 您从{{>highchartsHelper…}引用了相同的图表数据:chartObject=topGenresChart两次-这意味着您将显示完全相同的图表两次,即使您为每个图表提供了不同的ID。您的意图是什么? 无论如何,答案应该给你足够的时间去做


还要注意,您的感觉和回答助手是多余的。您可以在模板中直接使用{feel}和{answer},而无需通过帮助程序,因为这些帮助程序只返回this.feel和this.answer。

在帮助程序中传递用户id,然后进行相应的查找。这个问题有点混乱。你想用这些数据做一张图表,对吗?这是一个问题。然后在模板中使用{{each}},这是一个完全独立的问题。您的allAnswers和AllFeatures助手需要根据当前显示的患者进行筛选。这也有助于显示示例Quests对象,因为我们无法确定它与患者的关系users@MichelFloyd是的,没错!我会添加一个任务的例子…任务中缺少一些东西-没有日期或任何东西来排序。你怎么知道任务文档对应的是哪一周?你不能依赖数据库的顺序。好吧,我试着更具体一些:我正在收集问卷的答案,每周我会收集10个答案,如:第1周,答案[1,2,3,4,2,,…],第2周,答案[0,2,3,4,5,…];每周我都会在feel-like中收集一个数字:week1 feel=1,week2 feel=0。。。。1.如何更好地定义anser?2.我使用了{{each}},因为我在一个月内感觉更好。这七项必须存储在anser中,正如您在扩展4中所看到的。我参考highchart两次,因为我想为每个用户显示一个感觉图表和一个答案图表。顺便说一句,我已经尝试过了,但它不起作用1。那么每个任务文档都有一个长度为10的数字数组和一个感觉正确的数字?我已经修改了你的模式来反映这一点。然后需要7个任务文档来创建一周的感觉数据吗?你能展示你真正想要达到的目标吗?i、 e.这是我的数据在mongodb中的外观,这是我希望它在页面上的外观?我添加了一个示例,说明了我希望显示的内容和mongodb的内容…然后我希望有一个用于feel字段进度的highchart和一个用于表列进度的highchart,例如,Q1的值在3周内如何变化。
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)}
    }]}
};