簡體   English   中英

顯示來自Meteor.users的用戶信息,並通過Highcharts顯示

[英]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)}
    }]}
};

然而:

  1. 在您的問題中,您說answer由10個數字組成數組,但是您的模式已將其定義為String 您是說[String]嗎?
  2. 您說feel是一個數字0 1 2但是您的模板正在{{#each}}迭代。
  3. 尚不清楚您要在兩個系列中繪制的圖表。 您的示例數據每個都有7個元素組成的數組,但是Quests應該將哪些數據放入其中?
  4. 您要引用相同的圖表數據: {{> highchartsHelper ...}} chartObject=topGenresChart兩次-這意味着您將兩次顯示完全相同的圖表,即使您給每個ID都不同。 你的意圖是什么?

無論如何,答案應該給您足夠的動力。

另請注意,您的feelanswer幫助者是多余的。 您可以直接在模板中使用{{feel}}{{answer}}而不使用幫助器,因為這些幫助器僅分別返回this.feelthis.answer

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM