amCharts 动态 Stacked Column，将 urlField 或 ID 添加到 JSON答案

【问题标题】：amCharts dynamic Stacked Column, add urlField or ID to JSONamCharts 动态 Stacked Column，将 urlField 或 ID 添加到 JSON
【发布时间】：2017-09-04 07:04:25
【问题描述】：

我正在使用数据加载器生成图表。我的 JSON 数据与此类似。

 {
        "Month": 1,
        "District1": 2.6,
        "District2": 5.7,
        "District3": 6.2,
        "District4": 7.3,

    }, {
        "Month": 2,
        "District1": 4.6,
        "District2": 5.7,
        "District3": 2.2,
        "District4": 6.3,
        "District5": 4.3,
        "District7": 1.3,

    }

在我的 JavaScrit 中，我使用此代码从 PHP 文件生成图形。

  for ( var key in chart.dataProvider[ 0 ] ) {
            if ( chart.dataProvider[ 0 ].hasOwnProperty( key ) && key != chart.categoryField ) {

var graph = new AmCharts.AmGraph();
              graph.valueField = key;
              graph.type = "column";
              graph.title = key;
              graph.lineThickness = 0;

              graph.urlField =?????????????????????
              graph.urlTarget ="_blank";
              graph.labelColor = "#cccccc";
              graph.connect = false;
              graph.fillAlphas = 0.8;
              graph.balloonFunction = adjustBalloonText;
              graph.labelText =  key;
              chart.addGraph( graph );

            }

        }

数据是动态的，有些飞蛾有 15 个对象，有些只有 12 个。

我想为每个地区或 ID 添加一个链接，以便生成新图表。我如何将它添加到 JSON 字符串中。我试图用对象做到这一点像这样。

{
"Month":1
"District1": {"value":1, "url":"url.php?id=1", "id":1}
"District2": {"value":2, "url":"url.php?id=2", "id":2}
}

我无法将对象分配给 graph.valueField = key;

这可以解决吗？点击事件只返回月份索引而不是关于图形“ID”的信息。

希望有人能帮我解决这个问题。我已经尝试了几个小时没有任何运气。

最好的问候

马丁

【问题讨论】：

标签： php json amcharts

【解决方案1】：

您应该“扁平化”您的 dataProvider，因为 amCharts 的 urlField 和 valueField 不能引用嵌套对象内的键。所以，而不是：

{
  "Month":1
  "District1": {"value":1, "url":"url.php?id=1", "id":1}
  "District2": {"value":2, "url":"url.php?id=2", "id":2}
}

尝试输出类似这样的内容：

 {

  "Month":1

  "Dist1Value": 1,
  "Dist1Url": "url.php?id=1",
  "Dist1id": 1,

  "Dist2Value": 2,
  "Dist2Url": "url.php?id=2",
  "Dist2id": 2

}

我还将您的 for key ... in 循环更改为普通的 for 循环以循环预定义的区域（我假设您知道可以有多少个区域）。

var amount_districts = 12;

for(var i = 0; i < amount_districts.length; i++){

  // create a graph for each of our districts

  var graph = new AmCharts.AmGraph();
    graph.type = "column";
    graph.title = "District " + (i+1);
    graph.valueField = "Dist" + (i+1) + "Value";
    graph.UrlField = "Dist" + (i+1) + "Url";
    // ... etc

  // finally, add this graph to the chart
  chart.addGraph(graph);

}

如果发生“第 10 区”没有数据项，则图表将不会显示（但是，它将显示在图例中）。

【讨论】：