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不是图级属性，而是顶级图表对象属性）

更新了小提琴：http://jsfiddle.net/o7cm6nkh/2/

循环遍历amcharts堆叠柱形图

1 个答案: