我想使用 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,
}
}
}
}
在一个实例中,使用名称 key 作为 x 轴,使用 key1 作为 y 轴。 在另一个中,根据需要使用 data1/2/3 作为 x 及其字段。
但是,此示例中的 name1/name2 和 data1/data2/data3 是唯一的/动态生成的。
我不确定 JavaScript 是否有一种简单的方法来引用这些键,或者我是否最好以另一种方式呈现数据以使其更容易访问? 如果是这样,你将如何最好地在 javascript 中表示数据?
最佳答案
amCharts 需要特定格式的dataProvider
。格式总是这样的:
[{
"category": "Company A",
"value": 100
}, {
"category": "Company B",
"value": 200
}, {
// etc ...
}]
您可以对 category
和 value
使用不同的键名称,但 dataProvider 应始终是对象数组。
您可以将 jsondata 转换为这种格式。这非常简单。假设 name1 和 name2 键实际上是类别:
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"
}]
});
关于javascript - amcharts 将唯一键分配为字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46759581/