

Angularにて配列を使ったEChartの描画を試みました。

配列のデータはFireBaseのデータベースから取得してループ文で生成してます。  
これは動きません。

datasetのsourceに直接値を書くと動くので、そこが問題だとわかってます。

配列の作り方に問題があるのでしょうか？  
アドバイスいただけると幸いです。

直接値を書いたオブジェクトと、  
ループ文で回したオブジェクトに差があるように思えます。  
画像をご参照ください。

[![オブジェクトの差](https://i.stack.imgur.com/nSyDi.png)](https://i.stack.imgur.com/nSyDi.png)

[code]

    import { Component, OnInit } from '@angular/core';
    import { AngularFireDatabase, AngularFireList, SnapshotAction } from '@angular/fire/database';
    import { Observable } from 'rxjs';
    import { map } from 'rxjs/operators';
    import { Poll } from '../class/poll';
    import * as echarts from "echarts";
    import { EChartsOption } from 'echarts';
    
    @Component({
      selector: 'ac-poll',
      templateUrl: './poll.component.html',
      styleUrls: ['./poll.component.css']
    })
    export class PollComponent implements OnInit {
    
      polls$: Observable<Poll[]>;
      pollsRef: AngularFireList<Poll>;
    
      // sources:any[][] = new Array();
      chartOption: EChartsOption = {};
    
      constructor(
      private db: AngularFireDatabase
      ) {
        this.pollsRef = db.list('/polls/poll/count');
      }
    
      addCount(poll:Poll):void{
        const { key, count } = poll;
        this.pollsRef.update(key, new Poll(key,count+1));
    
      }
    
    
      ngOnInit(): void {
    
        let sources:any[]=new Array();
    
        this.polls$ = this.pollsRef.snapshotChanges()
        .pipe(
          map((snapshots: SnapshotAction<Poll>[]) => {
            return snapshots.map(snapshot => {
              const key = snapshot.payload.key;
              const value = snapshot.payload.val();
              const valueNum = Number(value);
    
              //グラフ
              sources.push({
                 "key":value.key,
                 "value":value.count
              })
              return new Poll(value.key,value.count)
    
            });
          })
        );
    
      console.log(sources)
    
        this.chartOption= {
          dataset: {
              // WORK!!!!
              // source:
              // [
              //   {key: '赤', value: 10},
              //   {key: '青', value: 13}
              // ]
    
              // NOWOEK
              source:sources
          },
          grid: { containLabel: true },
          xAxis: {
            type: 'value',
            name: "value"
          },
          yAxis: {
            type: 'category',
            name:"key"
          },
          series: [
            {
              type: 'bar',
              colorBy : 'data',
              label: {
                show: true,
                fontSize :20
              },
              encode: {
                // Map the "amount" column to X axis.
                x: 'value',
                // Map the "product" column to Y axis
                y: 'key'
              }
            }
          ]
        };
      }
    }
    
[/code]


CC BY-SA 4.0
2023-04-10T13:38:53.600
94477
2023-04-11T00:13:49.810
2023-04-11T00:13:49.810
41033
41033
question
typescript firebase angular
Angular で配列を使った EChart の描画