javascript - amcharts 将唯一键分配为字段

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,     
            }
        }
    }
  }

在一个实例中，使用名称 key 作为 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 可以访问嵌套字段，我会“展平”它们:

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"
  }]
});