我正在尝试为Angular中的 Jmeter 板创建图表。我在Firestore有两个收藏:一个叫“mechanicQualifications "另一个叫”mecanicos“在'mechanicQualifications'集合中,技工会收到用户的评分。我正在做的图表是一个条形图,它计算每个技工的平均评级。
我面临的问题是,当我创建图表时,它只显示技工ID而不是他们的姓名。我试图从'mechanicQualifications'集合中通过ID检索技工的名称,但它只显示'0'而不是技工名称。
如何解决此问题?
代码是这样的:
mechanicRatings: { mechanicId: string, qualification: number }[] = [];
interface MechanicQualification {
mechanicId: string;
qualification: number;
}
this.firestore.collection<MechanicQualification>('mechanicQualifications')
.valueChanges()
.subscribe(qualifications => {
const mechanicRatingsMap: { [mechanicId: string]: number[] } = {};
qualifications.forEach(qualification => {
if (!mechanicRatingsMap[qualification.mechanicId]) {
mechanicRatingsMap[qualification.mechanicId] = [];
}
mechanicRatingsMap[qualification.mechanicId].push(qualification.qualification);
});
this.mechanicRatings = Object.keys(mechanicRatingsMap).map(mechanicId => {
const ratings = mechanicRatingsMap[mechanicId];
const qualification = ratings.reduce((acc, rating) => acc + rating, 0) / ratings.length;
return { mechanicId, qualification };
});
});
this.firestore.collection('mecanicos').get().subscribe(snapshot => {
const mechanicNames: { [mechanicId: string]: string } = {};
snapshot.forEach(doc => {
const mechanicData = doc.data() as { uid: string, name: string };
mechanicNames[mechanicData.uid] = mechanicData.name;
});
const chartData = this.mechanicRatings.map(item => ({
name: mechanicNames[item.mechanicId],
y: item.qualification
}));
this.createBarChart(chartData);
});
这就是我如何创建图表
createBarChart(chartData: { name: string; y: number }[]) {
const chartOptions: Highcharts.Options = {
chart: {
type: 'bar'
},
title: {
text: 'Calificaciones Promedio de Mecánicos'
},
xAxis: {
type: 'category',
title: {
text: 'Nombre del Mecánico'
}
},
yAxis: {
title: {
text: 'Calificación Promedio'
}
},
series: [{
name: 'Calificación Promedio',
type: 'bar',
data: chartData
}]
};
Highcharts.chart('rating-container', chartOptions);
}
1条答案
按热度按时间bzzcjhmw1#
我们可以尝试向xAxis添加类别和标签