Как использовать мои данные с Charts.js в моем случае? - PullRequest
0 голосов
/ 11 сентября 2018

Я использую Charts.js в своем проекте Angular (не AngularJS), и я хочу использовать данные из своей базы данных для создания графики с женщиной / мужчиной, но я не знал, как создать цикл и подсчитать число женщин иличисло людей:

Во-первых, для диаграммы мой HTML-код:

<canvas id="myChart" width="700" height="400"></canvas>

машинопись:

ngAfterViewInit() {
    this.canvas = document.getElementById('myChart');
    this.ctx = this.canvas.getContext('2d');
    let myChart = new Chart(this.ctx, {
      type: 'pie',
      data: {
          labels: ["Femme", "Homme"],
          datasets: [{
              label: '# of Votes',
              data: [2,2],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
        responsive: false,
        display:true
      }
    });
  }

и код для получения моих данных:

javascript:

app.get("/api/getUser",function(req,res){
    model.find({},function(err,data){
              if(err){
                  res.send(err);
              }
              else{
                  res.send(data);
                  }
          });
  })

машинопись:

GetUser(){
    return this.http.get('http://localhost:8080/api/getUser/')
            .map((response: Response) => response.json())
  }

и вторая машинопись:

 ngOnInit() {
    this.newService.GetUser().subscribe(data =>  this.Repdata = data)
  }

для завершения, это коллекция:

{
    "_id" : ObjectId("5b9551a60e89ad15a8ff77fb"),
    "name" : "XXX",
    "prenom" : "KEVIN",
    "datenaissance" : "17/11/2011",
    "mail" : "KEVIN@laposte.fr",
    "tel" : "XXXXXXXXXX",
    "sexe" : "Homme",
    "adresse" : "XXXXXXXX",
    "note" : [ 
        {
            "matiere" : "Français",
            "note" : "10/20",
            "date" : "01/09/2018"
        }, 
        {
            "matiere" : "Anglais",
            "note" : "07/20",
            "date" : "26/09/2018"
        }, 
        {
            "matiere" : "EPS",
            "note" : "15/20",
            "date" : "29/09/2018"
        }
    ]
}

Я хочу посчитать количество полов: Homme и Sexe: Femme, чтобы использовать это для создания моей графики, но я не знал, как

большое спасибо

Если я сделаю это, мои диаграммы не смогут найти countHomme и countFemme:

javascript:

 app.get("/api/getUser",function(req,res){
    model.find({},function(err,data){
              if(err){
                  res.send(err);
              }
              else{
                  res.send(data);
                  var countHomme = model.where({ 'sexe': 'Homme' }).count();
                  res.send(countHomme);
                  var countFemme = model.where({ 'sexe': 'Femme' }).count();
                  res.send(countFemme);
                  }
          });
  })

машинопись:

 ngAfterViewInit() {
    this.canvas = document.getElementById('myChart');
    this.ctx = this.canvas.getContext('2d');
    let myChart = new Chart(this.ctx, {
      type: 'pie',
      data: {
          labels: ["Femme", "Homme"],
          datasets: [{
              label: '# of Votes',
              data: [countFemme,countHomme],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
        responsive: false,
        display:true
      }
    });
  }

1 Ответ

0 голосов
/ 11 сентября 2018

ИМО, лучше запрашивать данные о мужском и женском сексе из бэкэнда через API. Вы можете попытаться подсчитать поля, используя mongoose ORM с помощью метода Model.count () , и он может отослать обратно объект JSON с общим количеством в соответствии с вашими потребностями, и вы можете передать его непосредственно в chart.js * 1003. *

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...