amcharts 将唯一键分配为字段

Question

我想用amcharts显示一些数据。我有一些 json 这种格式的数据来自 url:

    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 是 unique/dynamically 生成的。

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

Answer 1

amCharts 需要特定格式的 dataProvider。格式总是这样：

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

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

您可以将您的 json 数据转换成这种格式。这很简单。假设 name1 和 name2 键实际上是类别：

var my_dataprovider = [];

for(category in jsondata){

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

}

如果您还需要 amCharts 可以访问嵌套字段，我会 "flatten" 它们：

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 设置为数据提供程序中的键之一。

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

amcharts 将唯一键分配为字段

amcharts assigning unique keys as field

javascript

amcharts