Question

我在我的Angular项目（不是AngularJS）中使用Charts.js，并且我想使用数据库中的数据来创建带有女人/男人的图形，但是我不知道如何创建循环并计算女人或男人的数量。人数：

首先，对于图表，我的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"
        }
    ]
}

我想计算sexe：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
      }
    });
  }

Answer 1

IMO，最好通过API从后端询问有关性别的数据。您可以尝试通过Model.count()方法使用猫鼬ORM对字段进行计数，它可以根据需要发送带有总计数的JSON对象，您可以将其直接输入chart.js

在我的案例中如何将我的数据与Charts.js一起使用？

1 个答案: