Question

我想使用amcharts来显示一些数据。我有一些来自url的格式的json数据：

    var jsondata = {
      "name1" : {
        "key1": 5,
        "key2": "value1",
        "data": {
            "data1": {
                "field1": 2,
                "field2": 3,
                "field3": 4
            }
        }
      },
      "name2" : {
        "key1": 5,
        "key2": "value1",
        "data": {
            "data2": {
                "field1": 2,
                "field2": 3,     
            },
            "data3": {
                "field1": 2,
                "field2": 3,     
            }
        }
    }
  }

在一个实例中，使用name键作为x轴，key1作为y。在另一个中使用data1 / 2/3作为x及其所需的字段。

但是，此示例中的name1 / name2和data1 / data2 / data3是唯一/动态生成的。

我不确定javascript是否有一种简单的方法可以引用这些键，或者我是否最好以另一种方式呈现数据以使其更容易访问？如果是这样，您最好如何在javascript中表示数据？

Answer 1

amCharts需要某种格式的dataProvider。格式总是这样：

[{
  "category": "Company A",
  "value": 100
}, {
  "category": "Company B",
  "value": 200
}, {
  // etc ...
}]

您可以为category和value使用不同的键名，但dataProvider应该始终是一个对象数组。

您可以将jsondata转换为此格式。这很简单。假设 name1 和 name2 键实际上是类别：

var my_dataprovider = [];

for(category in jsondata){

  my_dataprovider.push({
    "category": category,
    "key1": jsondata[category].key1,
    "key2": jsondata[category].key2
  });

}

如果你还要求amCharts可以访问嵌套字段，我会＆＃34;展平＆＃34;它们：

var my_dataprovider = [];

for(category in jsondata){

  var data_item = {
    "category": category,
    "key1": jsondata[category].key1,
    "key2": jsondata[category].key2
  };

  // flatten nested fields (inside "data")
  for(key in jsondata[category].data){
    // data1... or data2, data3...
    for(field in jsondata[category].data[key]){
      // field1, field2...
      data_item[key + '_' + field] = jsondata[category].data[key][field];
    }
  }

  /*
    {
      "category": "name1",
      "key1": 5,
      "key2": "value1",
      "data1_field1": 2,
      "data1_field2": 3,
      "data1_field3": 4
    }
  */

  my_dataprovider.push(data_item);

}

您可以将amCharts图表valueField设置为dataProvider中的其中一个键。

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataProvider": my_dataprovider,
  "categoryField": "category",
  "graphs": [{
    // ...
    "valueField": "data1_field1"
  }]
});

amcharts将唯一键指定为字段

1 个答案: