고유 한 키를 필드로 할당하는 amcharts

Question

일부 데이터를 표시하기 위해 amcharts를 사용하고 싶습니다. 는 I는 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,  
      } 
     } 
    } 
    } 

은 Y 등의 X 축과 같은 이름 KEY1 키로. 또 다른 예로는 data1/2/3을 x로 사용하고 필요에 따라 필드를 사용합니다.

그러나이 예에서 name1/name2 및 data1/data2/data3은 고유하거나 동적으로 생성됩니다.

이러한 키를 참조 할 수있는 쉬운 방법이 있거나 내가 쉽게 접근 할 수 있도록 다른 방식으로 데이터를 표시하는 것이 가장 좋은 경우 javascript로 알 수 있습니까? 그렇다면 자바 스크립트에서 데이터를 가장 잘 표현하는 방법은 무엇입니까?

Answer 1

amCharts에는 특정 형식의 dataProvider이 필요합니다. 형식은 다음과 같이 항상 :

는

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

당신은 category 및 value에 대해 서로 다른 키 이름을 사용할 수 있지만, dataProvider를 항상 객체의 배열이됩니다.

jsondata를이 형식으로 변환 할 수 있습니다. 그것은 아주 간단합니다. 당신은 또한 amCharts에 액세스 할 수 있도록 중첩 된 필드를 필요한 경우

var my_dataprovider = []; 

for(category in jsondata){ 

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

} 

, 나는 그들에게 "결합"다음과 같습니다 : 이름 1 및 NAME2 키가 실제로 범주 있다고 가정

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