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

在一个实例中使用的名称密钥作为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使用不同的密钥名称，但数据提供程序应始终对象的数组。

你可以将你的jsondata转换成这种格式。这非常简单。假设名1和名2键实际上是类：

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