遍历每个 object 属性 for amcharts 堆积柱形图

Question

您好，我正在使用 ajax 获取 php mysql 数据并将其显示到 amcharts 堆积柱形图，但由于我正在处理堆积柱形图，因此我需要定义每个标题和值字段分别生成图表的每个系列。

这是我的 jsfiddle： http://jsfiddle.net/o7cm6nkh/

有没有一种方法可以遍历每个属性名称？生成这样的输出而不是手动插入它们？

{
    "numberFormatter": {
            "precision": 2,
            "decimalSeparator": ".",
            "thousandsSeparator": ","
        },
    "fillAlphas": 0.8,
    "labelText": "[[title]]<br>" + "[[value]]",



    "labelPosition": "middle",
    "lineAlpha": 0.3,
    "title": "MAN",
    "type": "column",
    "color": "#000000",
    "valueField": "MAN"
  }, {
    "numberFormatter": {
            "precision": 2,
            "decimalSeparator": ".",
            "thousandsSeparator": ","
        },
    "fillAlphas": 0.8,
    "labelText":"[[title]]<br>" + "[[value]]",


    "labelPosition": "middle",
    "lineAlpha": 0.3,
    "title": "PAN",
    "type": "column",
    "color": "#000000",
    "valueField": "PAN"
  },
  {
    "numberFormatter": {
            "precision": 2,
            "decimalSeparator": ".",
            "thousandsSeparator": ","
        },
    "fillAlphas": 0.8,
    "labelText":"[[title]]<br>" + "[[value]]",


    "labelPosition": "middle",
    "lineAlpha": 0.3,
    "title": "DAV",
    "type": "column",
    "color": "#000000",
    "valueField": "DAV"
  }

Answer 1

您可以定义一个模板，其中包含所有所需的图表设置属性，这些属性不会更改，然后使用数据中的其他属性动态创建您的图表数组，并随时设置其他字段。由于您很可能会预先知道您的 categoryField 是什么，因此您可以简单地遍历响应的第一个数组元素中的其余属性并设置您的 title 和 valueField，因为这些是唯一发生变化的值.

假设您的 categoryField 总是 name:

  var graphs = Object.keys(response[0]).reduce(function(graphsArray, key) {
    if (key !== "name") {
      graphsArray.push({
        "fillAlphas": 0.8,
        "labelText": "[[title]]<br>" + "[[value]]",
        "labelPosition": "middle",
        "lineAlpha": 0.3,
        "title": key,
        "type": "column",
        "color": "#000000",
        //"showAllValueLabels": true,
        "valueField": key
      });
    }
    return graphsArray;
  }, []);


  // ...
  var AmCharts.makeChart("chartdiv", {
    // ...
    "graphs": graphs,
    // ...
  });

（请注意，numberFormatter 不是图表级别属性，而是顶级图表对象属性）

已更新 fiddle：http://jsfiddle.net/o7cm6nkh/2/

遍历每个 object 属性 for amcharts 堆积柱形图

Loop through each object property for amcharts stacked column charts

javascript

jquery

amcharts