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

をyとx軸とKEY1として名前キーを使用します。 別のものでは、data1/2/3をxとして使用し、必要に応じてフィールドを使用します。

ただし、この例では、name1/name2とdata1/data2/data3は一意的に/動的に生成されています。

これらのキーを参照する簡単な方法がある場合や、より簡単にアクセスできるように別の方法でデータを提示するのが最善の場合は、javascriptでわかりません。 もしそうなら、JavaScriptのデータをどのように表現するのが最適でしょうか？

Answer 1

amChartsは、特定の形式のdataProviderが必要です。あなたがcategoryとvalueに異なるキー名を使用できますが、dataProviderに常にオブジェクトの配列でなければなりません

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

：フォーマットは次のように常にあります。

jsondataをこの形式に変換することができます。それはかなり簡単です。

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); 

} 

あなたはNAME1とNAME2キーは実際のカテゴリーであることを仮定すると、 amChartsグラフのvalueFieldをdataProvider内のいずれかのキーに設定できます。

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