Question

我有一个地图对象：你可以看到它按年 - 月 - 日嵌套。

我想创建一个条形图，您可以根据年月日来查看＆＃34; Keszeg＆＃34;，＆＃34; Ponty＆＃34;等等的数字。我的代码准备就绪，但我无法正常工作。在这一部分，我得到了yearVal.entries的未定错误。

这是sulyhavonta.entries：

for（let [yearKey，yearVal] of sulyhavonta.entries（））{ for（let [monthKey，monthVal] of yearVal.entries（））

 let labels = [];
    let datasets = [];
    let fishData = {};

    this.firebasedb.list("/fogasok/").subscribe(_data => {

            // this.osszesfogasadatok = _data.filter(item => item.publikus == true);
            // let fogasSzam=this.osszesfogasadatok.length;
            let sulySum = _data.reduce((sum, item) => sum + parseInt(item.suly), 0);
            let sulySumMap = _data.map((item, index) => {
              var n = new Date(item.datum);
              return {

                ev: n.getFullYear(),
                honap: n.getMonth() + 1,
                nap: n.getDate(),
                suly: item.suly,
                halfaj: item.halfaj,
                eteto: item.etetoanyag1,
                csali: item.hasznaltcsali,
                helyszin: item.helyszin
              }

            });

    var sulySumByDate = d3.nest()
    .key(function (d) {
      return d.ev;
    })
    .key(function (d) {
      return d.honap;
    })
    .key(function (d) {
      return d.nap;
    })
    .key(function (d) {
      return d.halfaj;
    })
    .rollup(function (values) {
      return d3.sum(values, function (d) {
        return parseInt(d.suly);
      });
    })
    .map(sulySumMap)
    var sulyhavonta=sulySumByDate;
    console.log("sulyhavonta",sulyhavonta)
    for (let [yearKey, yearVal] of sulyhavonta.entries()) {
      for (let [monthKey, monthVal] of yearVal.entries()) {
        for (let [dayKey, dayVal] of monthVal.entires()) {
          labels.push(yearKey + '.' + monthKey + '.' + dayKey);
          for (let [fish, fishVal] of dayVal.entires()) {
            if (fishData[fish] === undefined) {
              fishData[fish] = [];
            }
            fishData[fish].push(fishVal);
            console.log("fishdata",fishData);
          }
        }
      }
    }
    var colors = [
      ["#ce8d00", "#ffae00"],
      ["#007bce", "#84ceff"]
    ];
    var i = 0;
    for (let key in fishData) {
      datasets.push({
        label: key,
        data: fishData[key],
        backgroundColor: colors[i % 2][0],
        hoverBackgroundColor: colors[i % 2][1],
        hoverBorderWidth: 0
      });
      i++;
    }
    console.log("dataset",datasets)
  });

    var bar_ctx = document.getElementById('bar-chart');
    var bar_chart = new Chart(bar_ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: datasets
      },
      options: {
        animation: {
          duration: 10,
        },
        scales: {
          xAxes: [{
            stacked: true,
            gridLines: {
              display: false
            },
          }],
          yAxes: [{
            stacked: true
          }],
        }, // scales
        legend: {
          display: true
        }
      } // options
    });

只是快速说明，而不是从firebase和d3嵌套读取，它使用静态数据，但我想使用上面的代码直接从我的数据库中读取。

var sulyhavonta = new Map（[[2018，new Map（[[1，new Map（[[15，new 地图（[[＆＃39; keszeg＆＃39;，3]，[＆＃39; ponty＆＃39;，]]），[29，new 地图（[[＆＃39; keszeg＆＃39;，1]，[＆＃39; ponty＆＃39;，1]]）]]）]，[5，新地图（[[24，new] 地图（[[＆＃39; keszeg＆＃39;，9]，[＆＃39; ponty＆＃39;]]）]]）]]）]]）;

使用Charts.js可视化我的映射对象

0 个答案: