Amchart 4 人口金字塔

时间:2021-04-14 23:52:58

标签: json datasource amcharts

尝试使用上述数据制作人口金字塔。我需要以相反的顺序对其进行排序,但不确定为什么数据不起作用。

Fiddle

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;

});

0 个答案:

没有答案