尝试使用上述数据制作人口金字塔。我需要以相反的顺序对其进行排序,但不确定为什么数据不起作用。
am4core.ready(function () {
am4core.useTheme(am4themes_animated);
var data=[{"sp":31900.00,"pecoi":6475.00,"cecoi":0.00},{"sp":32000.00,"pecoi":171900.00,"cecoi":18550.00},{"sp":32100.00,"pecoi":9175.00,"cecoi":100.00},{"sp":32200.00,"pecoi":37350.00,"cecoi":1050.00},{"sp":32300.00,"pecoi":26075.00,"cecoi":1950.00},{"sp":32400.00,"pecoi":19575.00,"cecoi":1900.00},{"sp":32500.00,"pecoi":202075.00,"cecoi":140200.00},{"sp":32600.00,"pecoi":16125.00,"cecoi":4500.00},{"sp":32700.00,"pecoi":17000.00,"cecoi":11975.00},{"sp":32800.00,"pecoi":69150.00,"cecoi":81925.00},{"sp":32900.00,"pecoi":17225.00,"cecoi":39825.00},{"sp":33000.00,"pecoi":186175.00,"cecoi":234150.00},{"sp":33100.00,"pecoi":10125.00,"cecoi":36775.00},{"sp":33200.00,"pecoi":28300.00,"cecoi":106350.00},{"sp":33300.00,"pecoi":14350.00,"cecoi":87825.00},{"sp":33400.00,"pecoi":4625.00,"cecoi":78675.00},{"sp":33500.00,"pecoi":74700.00,"cecoi":327550.00},{"sp":33600.00,"pecoi":2550.00,"cecoi":44875.00},{"sp":33700.00,"pecoi":1800.00,"cecoi":30000.00},{"sp":33800.00,"pecoi":1050.00,"cecoi":39050.00},{"sp":33900.00,"pecoi":725.00,"cecoi":12075.00}];
var chart = am4core.create("divStaticPopulation930", am4charts.XYChart);
// chart.dataSource.url =data;
//chart.dataSource.parser = new am4core.JSONParser();
chart.data=data;
chart.width = am4core.percent(100);
chart.height = am4core.percent(100);
chart.layout = "horizontal";
var PEChart = chart.createChild(am4charts.XYChart);
PEChart.paddingRight = 0;
PEChart.data= chart.data;
//PEChart.data = JSON.parse(JSON.stringify(chart.data));
// PEChart.dataSource.url = "../api/OptionChain/GetCOIStatic";
// PEChart.dataSource.parser = new am4core.JSONParser();
chart.data=data;
// Create axes
var PECategoryAxis = PEChart.yAxes.push(new am4charts.CategoryAxis());
PECategoryAxis.dataFields.category = "sp";
PECategoryAxis.renderer.grid.template.location = 0;
//maleCategoryAxis.renderer.inversed = true;
PECategoryAxis.renderer.minGridDistance = 15;
var PEValueAxis = PEChart.xAxes.push(new am4charts.ValueAxis());
PEValueAxis.renderer.inversed = true;
PEValueAxis.min = 0;
PEValueAxis.max = 10;
PEValueAxis.strictMinMax = true;
PEValueAxis.numberFormatter = new am4core.NumberFormatter();
PEValueAxis.numberFormatter.numberFormat = "#.#'%'";
// Create series
var PESeries = PEChart.series.push(new am4charts.ColumnSeries());
PESeries.dataFields.valueX = "pe";
PESeries.dataFields.valueXShow = "percent";
PESeries.calculatePercent = true;
PESeries.dataFields.categoryY = "sp";
PESeries.interpolationDuration = 1000;
PESeries.columns.template.tooltipText = "PE, sp{categoryY}: {valueX} ({valueX.percent.formatNumber('#.0')}%)";
var CEChart = chart.createChild(am4charts.XYChart);
CEChart.paddingLeft = 0;
// CEChart.data = JSON.parse(JSON.stringify(chart.data));
//CEChart.dataSource.url = "../api/OptionChain/GetCOIStatic";
CEChart.data= chart.data;
CEChart.dataSource.parser = new am4core.JSONParser();
// Create axes
var CECategoryAxis = CEChart.yAxes.push(new am4charts.CategoryAxis());
CECategoryAxis.renderer.opposite = true;
CECategoryAxis.dataFields.category = "sp";
CECategoryAxis.renderer.grid.template.location = 0;
CECategoryAxis.renderer.minGridDistance = 15;
var CEValueAxis = CEChart.xAxes.push(new am4charts.ValueAxis());
CEValueAxis.min = 0;
CEValueAxis.max = 10;
CEValueAxis.strictMinMax = true;
CEValueAxis.numberFormatter = new am4core.NumberFormatter();
CEValueAxis.numberFormatter.numberFormat = "#.#'%'";
CEValueAxis.renderer.minLabelPosition = 0.01;
// Create series
var CESeries = CEChart.series.push(new am4charts.ColumnSeries());
CESeries.dataFields.valueX = "ce";
CESeries.dataFields.valueXShow = "percent";
CESeries.calculatePercent = true;
CESeries.fill = CEChart.colors.getIndex(4);
CESeries.stroke = CESeries.fill;
//femaleSeries.sequencedInterpolation = true;
CESeries.columns.template.tooltipText = "CE, sp{categoryY}: {valueX} ({valueX.percent.formatNumber('#.0')}%)";
CESeries.dataFields.categoryY = "sp";
CESeries.interpolationDuration = 1000;
});