Question

我目前正在尝试amCharts 4，并希望将json加载到图中。因为我的json是嵌套的，所以ive添加了on parseended事件来更改我的json结构。当我控制台记录新数据时，它具有正确的结构。但是，当我要将其加载到类别中时，它什么也没有显示。目前，我只希望显示类别，而没有其他值。

我的component.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";

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"];
            } else {
              newDataItem[key] = dataItem[key];
            }
          });
          newData.push(newDataItem);         
        });
        console.log(JSON.stringify(newData));
        return newData
      });

      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

您有使用chart.dataSource.url加载外部数据的正确想法。

要解析外部JSON并将其格式化，使其适用于chart，series或类别轴data，最好使用适配器。适配器使您可以根据自己的喜好调整事物。我们在此提供了指南：https://www.amcharts.com/docs/v4/concepts/adapters/

在这种情况下，一旦解析了JSON，就可以将适配器用于parsedData。代码如下（从another question of yours中获取并修复）：

chart.dataSource.adapter.add("parsedData", function(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) {
          newDataItem[dataItem["@name"]] = dataItem["@id"];
        });
      } else {
        newDataItem[key] = dataItem[key];
      }
    });
    newData.push(newDataItem);
  });
  data = newData;
  return data;
});

这是一个演示（也从您的其他问题中获取了示例JSON，修复了JSON和格式逻辑）：

https://codesandbox.io/s/r1mnjq192p

Answer 2

我通过添加以下行来修复它： 替换此：返回newData 与此： chart.dataSource.data = newData

如何在Amcharts4中加载外部数据

2 个答案: