我正在使用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");
});
})
}
}