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