Amcharts 4如何显示所有类别?

时间:2018-09-13 12:37:38

标签: typescript amcharts

我正在使用amcharts4,并希望显示所有类别。现在,它隐藏了很多,并且停止了某个类别。我看到了一些使用gridcount或类似方法的解决方案,但我不知道它在amcharts的第4版中如何工作。

我的组件.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';
    import { CategoryAxis } from '@amcharts/amcharts4/charts';

    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).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));
            });

          chart.data = chart.dataSource.data;

          var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
          categoryAxis.dataFields.category = "TransactionID3";

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

我的图形当前仅出于演示目的添加了类别轴。 enter image description here

0 个答案:

没有答案