Question

我正在使用amcharts 4，并且想使用我的嵌套数据，我知道amcharts不支持嵌套数据，因此我添加了一个parseended事件来更改json的结构。我可以获取事件的ID，但无法在对象中添加数组的数据。我可以通过调试器看到他实际上遍历了嵌套数组的每个对象，但是他没有将它们添加到newDataItem对象中。

我的JSON：

{{
  "Event": {
    "@id": "45",
    "@name": "SP:StmtCompleted",
    "Column": [
      {
        "@id": "1",
        "@name": "TextData",
        "#text": "SELECT [Object Timestamp], [Object Type], [Object ID], [Change Type] FROM \"test\".dbo.\"Object Tracking\" WITH(TABLOCK) WHERE [Object Timestamp] > @lastKnownTimeStamp"
      },
      {
        "@id": "3",
        "@name": "DatabaseID",
        "#text": "24"
      },
      {
        "@id": "11",
        "@name": "LoginName",
        "#text": "test\\MBS_SERVER-NAV03"
      },
      {
        "@id": "4",
        "@name": "TransactionID",
        "#text": "206618305"
      },
      {
        "@id": "12",
        "@name": "SPID",
        "#text": "77"
      },
      {
        "@id": "10",
        "@name": "ApplicationName",
        "#text": "Microsoft Dynamics NAV Service"
      },
      {
        "@id": "13",
        "@name": "Duration",
        "#text": "25"
      },
      {
        "@id": "14",
        "@name": "StartTime",
        "#text": "2018-09-05T10:24:20.83+02:00"
      },
      {
        "@id": "15",
        "@name": "EndTime",
        "#text": "2018-09-05T10:24:20.83+02:00"
      },
      {
        "@id": "16",
        "@name": "Reads",
        "#text": "2"
      },
      {
        "@id": "17",
        "@name": "Writes",
        "#text": "0"
      },
      {
        "@id": "18",
        "@name": "CPU",
        "#text": "0"
      },
      {
        "@id": "28",
        "@name": "ObjectType",
        "#text": "20816"
      },
      {
        "@id": "35",
        "@name": "DatabaseName",
        "#text": "test"
      },
      {
        "@id": "48",
        "@name": "RowCounts",
        "#text": "0"
      }
    ]
  }
}}

我尝试实现的结果示例

{
  "_id": "45",
  "TransactionID": "4",
  "SPID": "12"
  ....
  ....
}

我的组件.ts：

import { Component, NgZone } from '@angular/core';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import { DataSource } from '@amcharts/amcharts4/core';
import { forEach } from '@angular/router/src/utils/collection';

am4core.useTheme(am4themes_animated);

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})

export class ChartComponent {
  constructor(private zone: NgZone) { }

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      let chart = am4core.create("chartdiv", am4charts.XYChart)

      chart.paddingRight = 30;
      chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";

      var colorSet = new am4core.ColorSet();
      colorSet.saturation = 0.4;
      chart.dataSource.url = "https://localhost:44321/api/upload/readFile";
      chart.dataSource.events.on("parseended", function (ev) {
        // parsed data is assigned to data source's `data` property
        var data = ev.target.data;
        var newData = [];
        data.forEach(function (dataItem) {
          var newDataItem = {};
          Object.keys(dataItem).forEach(function (key) {
            if (typeof dataItem[key] === "object") {
              newDataItem["_id"] = dataItem[key]["@id"];
              dataItem[key]["Column"].forEach(function (dataItem) {
                Object.keys(dataItem).forEach(function (key) {
                    newDataItem[dataItem[key]["@name"]] = dataItem[key]["@id"];                                    
                })
              })           
            } else {
              newDataItem[key] = dataItem[key];
            }
          });
          newData.push(newDataItem);
        });
          console.log(JSON.stringify(newData));
          chart.dataSource.data = newData
        });

      chart.data = chart.dataSource.data;

      var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
      categoryAxis.dataFields.category = "_id";
      categoryAxis.renderer.grid.template.location = 0;
      categoryAxis.renderer.inversed = true;


      var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
      dateAxis.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";
      dateAxis.renderer.minGridDistance = 70;
      dateAxis.baseInterval = { count: 30, timeUnit: "minute" };
      dateAxis.max = new Date(2018, 0, 1, 24, 0, 0, 0).getTime();
      dateAxis.strictMinMax = true;
      dateAxis.renderer.tooltipLocation = 0;

      var series1 = chart.series.push(new am4charts.ColumnSeries());
      series1.columns.template.width = am4core.percent(80);
      series1.columns.template.tooltipText = "{name}: {openDateX} - {dateX}";

      series1.dataFields.openDateX = "fromDate";
      series1.dataFields.dateX = "toDate";
      series1.dataFields.categoryY = "name";
      series1.columns.template.propertyFields.fill = "color"; // get color from data
      series1.columns.template.propertyFields.stroke = "color";
      series1.columns.template.strokeOpacity = 1;

      chart.scrollbarX = new am4core.Scrollbar();

      chart.dataSource.events.on("error", function (ev) {
        console.log("Oopsy! Something went wrong");
      });
    })
  }
}

Answer 1

通过从嵌套项目中删除[key]来解决此问题：

var colorSet = new am4core.ColorSet();
      colorSet.saturation = 0.4;
      chart.dataSource.url = "https://localhost:44321/api/upload/readFile";
      chart.dataSource.events.on("parseended", function (ev) {
        // parsed data is assigned to data source's `data` property
        var data = ev.target.data;
        var newData = [];
        data.forEach(function (dataItem) {
          var newDataItem = {};
          Object.keys(dataItem).map(function (key) {
            if (typeof dataItem[key] === "object") {
              newDataItem["_id"] = dataItem[key]["@id"];
              dataItem[key]["Column"].forEach(function (nestedItem, index) {
                Object.keys(dataItem).map(function () {
                  newDataItem[nestedItem["@name"] + index] = nestedItem["#text"];
                })
              })           
            } else {
              newDataItem[key] = dataItem[key];
            }
          });
          newData.push(newDataItem);
        });
        chart.dataSource.data = newData
        console.log(JSON.stringify(chart.dataSource.data));
        });

Amcharts 4获取嵌套数组数据

1 个答案: