Я использую 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
}
});
}