如何在动态图形中显示聚集条形图

Question

更新的

可以让你可能的图形值动态。下面的代码传递一个静态值，但我得到了动态代码图。例:每当定义图值时，结果都会得到3-4个子类别I。。

var processedChartData = resultx.map(function(rawDataElement) {
  var newDataElement = { "category": rawDataElement.category };
  rawDataElement.data.forEach(function(nestedElement, index) {
    newDataElement["value" + index] = nestedElement.value;
    newDataElement["subcategory" + index] = nestedElement.subcategory
  });
  return newDataElement;
});

AmCharts.makeChart(id, {
    "type": "serial",
    "theme": "light",
    "categoryField": "category",
    "rotate": false,
    "startDuration": 0,
    "categoryAxis": {
      "gridPosition": "start",
      "position": "left"
    },
    "graphs": [{
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2004",
        "type": "column",
      "balloonText": "[[subcategory0]]: [[value]]",
        "valueField": "value0"
    }, {
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2005",
        "type": "column",
      "balloonText": "[[subcategory1]]: [[value]]",
        "valueField": "value1"
    },
    {
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2005",
        "type": "column",
      "balloonText": "[[subcategory2]]: [[value]]",
        "valueField": "value2",
    }],
    "guides": [],
    "allLabels": [],
    "balloon": {},
    "titles": [],
    "dataProvider": processedChartData,
      "export": {
        "enabled":false
       }
  });

原题：

聚集条形图数组内键如何显示多个条形图。

我的儿子在下面：

[
      {
        "0":
        {
          "package_sold":"88",
          "vSectorName":"Meat"
        },
        "country":"France"
      },
      {
        "0":
        {
          "package_sold":"68",
          "vSectorName":"Meat"
        },
        "1":
        {
          "package_sold":"151",
          "vSectorName":"Poultry"
        },
        "country":"United Kingdom"
      }
    ]

如何在图形dataProvider中显示

Answer 1

AmCharts不支持嵌套的JSON。您需要将JSON扁平化为一个对象，以便您的valueFields在数组的每个元素中都是不同的。

例如，这是：

  {
    "0":
    {
      "package_sold":"68",
      "vSectorName":"Meat"
    },
    "1":
    {
      "package_sold":"151",
      "vSectorName":"Poultry"
    },
    "country":"United Kingdom"
  }

可以转化为：

{
  "Meat_package_sold": 68,
  "Poultry_package_sold": 151,
  "country": "United Kingdom"
}

从这里，您可以将图形valueField设置为"Meat_package_sold"和"Poultry_package_sold"。我假设你的categoryField是"country"。

您要么需要更改后端，要么编写一些JS来将数据重新映射到AmCharts可以识别的格式。

编辑：这里有一个使用JS映射您的JSON数据的基本示例：

​

var rawData = [{
    "0": {
      "package_sold": "88",
      "vSectorName": "Meat"
    },
    "country": "France"
  },
  {
    "0": {
      "package_sold": "68",
      "vSectorName": "Meat"
    },
    "1": {
      "package_sold": "151",
      "vSectorName": "Poultry"
    },
    "country": "United Kingdom"
  }
]
var newData = [];
rawData.forEach(function(dataItem) {
  var newDataItem = {};
  Object.keys(dataItem).forEach(function(key) {
    if (typeof dataItem[key] === "object") {
      newDataItem[dataItem[key]["vSectorName"] + "_package_sold"] = dataItem[key]["package_sold"];
    } else {
      newDataItem[key] = dataItem[key];
    }
  });
  newData.push(newDataItem);
});

console.log(JSON.stringify(newData));

​

使用正确的JSON格式演示图表：

​

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "categoryField": "country",
  "graphs": [{
      "fillAlphas": 0.8,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "Meat_package_sold"
    },
    {
      "fillAlphas": 0.8,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "Poultry_package_sold"
    }
  ],
  "dataProvider": [{
    "Meat_package_sold": 88,
    "country": "France",
  }, {
    "Meat_package_sold": 68,
    "Poultry_package_sold": 151,
    "country": "United Kingdom"
  }, {
    "Meat_package_sold": 120,
    "Poultry_package_sold": 110,
    "country": "Germany"
  }]
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

​

Answer 2

这是动态的json数据，但是为了说明如何使用和构建它，我是这样定义的。实际上，我使用ajax获取json数据，然后动态地构建它。在这里，我已经生成了图形，GLName相对于它每个月的开放。希望它对大家都有帮助。

​

var resp=[
  {
    "MONTH_": "01",
    "MONTH_NAME": "JAN",
    "YEAR_": "2018",
    "GL_NAME": "CASH,FACTORY, SITE,OFFICE ",
    "GL_ID": "79,81,522,89",
    "OPENING": "606294,0,24851,170392",
    "RECEIPT": "1641300,40000,210850,82300",
    "PAYMENT": "2074921,103209,168893,40000",
    "CLOSING": "172673,149483,66808,0"
  },
  {
    "MONTH_": "02",
    "MONTH_NAME": "FEB",
    "YEAR_": "2018",
    "GL_NAME": " SITE,CASH,OFFICE ,FACTORY",
    "GL_ID": "81,79,522,89",
    "OPENING": "66808,172673,0,149483",
    "RECEIPT": "102650,40000,3479000,200000",
    "PAYMENT": "239379,168339,40000,3388527",
    "CLOSING": "-69921,0,181144,263146"
  },
  {
    "MONTH_": "03",
    "MONTH_NAME": "MAR",
    "YEAR_": "2018",
    "GL_NAME": "FACTORY,CASH,OFFICE , SITE",
    "GL_ID": "89,81,79,522",
    "OPENING": "181144,-69921,0,263146",
    "RECEIPT": "30000,40000,1943500,200000",
    "PAYMENT": "69242,1806551,18177",
    "CLOSING": "141902,400095,40000,111902"
  }
]
      
        var newChartDataArr = [];
        var colNameArr = [];
        var GLID = [];
        var amtArr = [];
        var newBarGraph = [];
        myJsonString1 = JSON.stringify(resp);
        var obj = JSON.parse(myJsonString1);
        var obj1 = resp[0];
        //spliting of GLName
        if (obj1.GL_NAME.toString().indexOf(',') != -1) {
            colNameArr = obj1.GL_NAME.split(',');
            GLID =obj1.GL_ID.split(',');
        } else {
            colNameArr.push(obj1.GL_NAME);
            GLID =obj1.GL_ID.split(',');
        }
        //Getting Month and Opening of GL
        $.each(resp, function (i, value) {
            var newObj = {}; 
            newObj['MONTH_NAME'] = value.MONTH_NAME+"-"+value.YEAR_;
            $.each(value, function (k, v) {
                if (k == 'OPENING') {
                    for (var i = 0; i < colNameArr.length; i++) {
                        if (v.toString().indexOf(',') != -1) {
                            newObj[colNameArr[i]] = parseFloat(v.split(',')[i]);
                        } else {
                            newObj[colNameArr[i]] = parseFloat(v);
                        }
                    }
                }
            });
            newChartDataArr.push(newObj); //GL with Opening
        });
        for (var i = 0; i < colNameArr.length; i++) {
            let graph = {};
            graph["id"] = "v-"+GLID[i];
            graph["balloonText"] = colNameArr[i] + "  [[category]] Amount:[[value]]",
            graph["title"] = colNameArr[i];
            graph["valueField"] = colNameArr[i];
            graph["fillAlphas"] = 0.8;
            graph["lineAlpha"] = 0.2;
            graph["type"] = "column";
            newBarGraph.push(graph);
        }
        chart = AmCharts.makeChart("Monthdiv", {
            "type": "serial",
            "theme": "light",
            "categoryField": "MONTH_NAME",
            "startDuration": 1,
            "trendLines": [],
            "legend": {
            	"position": "bottom",
            	"maxColumns": 2,
                "useGraphSettings": true
            },
            "depth3D": 10,
            "angle": 60,
            "graphs": newBarGraph,
            "guides": [],
            "valueAxes": [
                {
                	 "position": "left",
                     "title": "Opening"
                }
            ],
            "categoryAxis": {
            	 "gridPosition": "start",
                 "labelRotation": 90,
                 "title": "Months"
            },
            "allLabels": [],
            "balloon": {},
            "titles": [{
                "text":"Monthly Sale"
            }],
            "dataProvider": newChartDataArr,
            "export": {
                "enabled": true
            },
            "listeners": [{
                "event": "clickGraphItem",
                "method": function (event) {
                  var gl_ID=(event.item.graph.id).slice(2);
                  var month = (event.item.category).slice(0, 3);
                  var calender = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
                  var monthVal = calender.indexOf(month) + 1;
                  var year = (event.item.category).slice(4, 8);
                  $("#fromDate").val("01/" + monthVal + "/" + year);
                  $("#toDate").val("30/" + monthVal + "/" + year);
                  Daliy(gl_ID,event.item.category);
                  showSummary();
                }
              }]
        });             

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div class="col-sm-12" id="Monthdiv" style="height: 370px;">

​