1

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

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

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

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

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

オブジェクトの差

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'
          }
        }
      ]
    };
  }
}

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。