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