如何将数据从firebase推送到Highchart Networkgraph？

你好。

当我使用chartData功能将数据推送到Highchart networkgraph时，它不起作用。
如何从firebase获取图形推送数据。
Firebase数据采用所需的格式，因此它可以检索数据。
问题是如何在图表中显示它。
当我用数据值测试图表时​​现在已经注释掉了，该图运行良好。希望从firestore获取数据。
对于饼图，这种方法可以将数据推送到图中，所以我认为它也适用于网络图。
有人能帮我吗？

将数据从firebase推送到networkgraph的函数，该函数不起作用

我在data.push中尝试了不同的格式，但没有成功。

从console.log函数输出chartData
“[“Valg”，“ikke bra nok”]”
“[“Valg”，“sint”]”
“[“Valg”，“hat”]”

下面的图表。当我使用手动数据（即现在注释掉的数据）时，图形显示正常。

//莲花
plotLotusChart（创意：创意[]）{
让myChart=HighCharts.chart（'lotus'{
图表：{
键入：“网络图”，
活动：{
加载：函数（）{
this.series[0].addPoint（['Valg']）；
}
},
背景颜色：“rgba（0,0,0,0）”，
玛金托普：80
},
标题：空，
副标题:{
文本：“Lotus blomsten”
},
打印选项：{
网络图：{
键：[“从”、“到”]，
布局算法：{//已添加
enableSimulation:正确
}
}
}, 
系列：[
{
标记：{半径：30，
},
数据标签：{
启用：对，
链接格式：“”，
allowOverlap：对
},
数据：[这是chartData（ideas）]，
//['Valg'，'Følelser']，
//['Valg'，'Behov']，
//['Valg'，'Strategier']，
//['Valg'，'Forventninger']，
//['Valg'，'harmonoøvelsen']
// ],
类型：未定义，
}]
});
}

错误类型错误：无法读取未定义的属性id
在highcharts more.js:111
在Array.forEach（）
在a（highcharts more.js:111）
在highcharts more.js:111
在Array.forEach（）
在reingold-fruchterman.setCircularPositions（highcharts more.js:111）上
位于reingold-fruchterman.initPositions（highcharts more.js:111）
在reingold-fruchterman.start（highcharts more.js:106）上
在highcharts more.js:117

---

在Array.forEach（）

上，您能否在在线编辑器上用我可以处理的样本数据重现您的案例？它不必是firebase中的当前数据，也可以是一些固定值，仅用于测试。您好。我已经将我的代码添加到JSFIDLE，但我不是一个经验丰富的typescript、anguler和Ionic开发人员。因此，我无法在JSFIDLE中显示图形。但是我所有的代码都在那里。链接到源代码：在纯JS中有一个简单的networkgraph代码复制-这个加载回调破坏了您的图表。这就是没有它的情况-回到整个案例-您共享的演示无法工作，我无法修复它。如果你想得到帮助，请尽可能简单地再现你的问题。

import * as HighCharts from 'highcharts';
import networkgraph from 'highcharts/modules/networkgraph';
import more from 'highcharts/highcharts-more';
import solidgauge from 'highcharts/modules/solid-gauge';
import { Injectable } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';
import { uniqBy, groupBy, sum, map, zip } from "lodash";
import { AngularFirestore } from "@angular/fire/firestore";
import { IdeaService } from 'src/app/services/firestore/getidea.service'; 
import { Idea } from 'src/app/models/idea.model';
import { Chart } from 'highcharts';
more(HighCharts);
solidgauge(HighCharts);
networkgraph(HighCharts);

// Highchart - networkgraph - push data
private chartData(ideas: Idea[]) {
  const data = [];
  const grouped = groupBy(ideas, x => x.feeling);
  Object.keys(grouped).forEach(key => {
    const from = 'Valg'
    var value = grouped[key];
    console.log({ from: `${from}`, to: `${key}`})   
    data.push([`${from}`, `${key}`]);  
  });
    return data;
}

// Lotus flower
plotLotusChart(ideas: Idea[]) {
  let myChart = HighCharts.chart('lotus', {
      chart: {
        type: 'networkgraph',
        events: {
          load: function() {
            this.series[0].addPoint(['Valg'] );
          }
        },
        backgroundColor: 'rgba(0,0,0,0)',
        marginTop: 80
      },
      title: null,

      subtitle: {
            text: '<span style="color: white">Lotus blomsten</span>'
      },
      plotOptions: {
        networkgraph: {
          keys: ['from', 'to'],
          layoutAlgorithm: { // added
            enableSimulation: true
          }
        }
      }, 
      series: [
        {
          marker: {radius: 30,
                  },
          dataLabels: {
                  enabled: true,
                  linkFormat: '',
                  allowOverlap: true 
                      },
        data: [this.chartData(ideas)],
             //     ['Valg', 'Følelser'],
             //     ['Valg', 'Behov'],
             //     ['Valg', 'Strategier'],
             //     ['Valg', 'Forventninger'],
             //     ['Valg', 'Harmoniøvelsen']
             // ],
          type: undefined,
        }]
  });
}