highcharts 尝试在Angular中创建条形图

izkcnapc  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(116)

我正在尝试为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);
}
bzzcjhmw

bzzcjhmw1#

我们可以尝试向xAxis添加类别和标签

xAxis: {
 type: 'category',
 title: {
   text: 'Nombre del Mecánico' 
 },
 categories: chartData.map(item => { return item.name });
 labels: {
   enabled: true
 }
}

相关问题