具有详细JSON的Amcharts

[{“SUM_PTS”：{“datatype”：“INTEGER”，“length”：“8”，“value”：“29903727”，“obfuscated”：“false”}，“SUM_TOTAL” ：{ “数据类型”： “INTEGER”， “长度”： “10”， “值”： “1644704985”， “模糊”： “假”}， “MID”：{ “数据类型”： “字母数字”，“长度“：”27“，”value“：”Vendor 1“，”obfuscated“：”false“}}，{”SUM_PTS“：{”datatype“：”INTEGER“，”length“：”7“ “3283570”， “模糊”： “假”}， “SUM_TOTAL”：{ “数据类型”： “INTEGER”， “长度”： “9”， “值”： “180596350”， “模糊”： “假” }，“MID”：{“datatype”：“ALPHANUMERIC”，“length”：“23”，“value”：“Vendor 2”，“obfuscated”：“false”}}]具有详细JSON的Amcharts

考虑到上面的冗长JSON，我如何分配valueField和titleField？

SUM_PTS和MID似乎不起作用。我认为这是因为我的JSON比例子中使用的更冗长。我无法更改JSON，但我需要在Amcharts Javascript中解决。

来源

2017-10-12 Klaptrap

AmCharts无法读取嵌套JSON，所以你将不得不重新映射您的数据无论如何，它将它传递给AmCharts。如果您无法更改Web服务，则可以在JavaScript中执行此操作。如果您指出什么是您的标题字段和值字段，我可以展示如何重新映射它，以便它可以与您试图使用的任何图表一起使用。 – xorspark

谢谢@xorspark。标题字段将是MID的值，值字段将是SUM_PTS的值。 – Klaptrap

感谢您的信息。看到我的回答下面 – xorspark

由于SUM_PTS包含您的价值，MID包含您的标题，将其映射到一个简化的数据提供程序的格式很简单：

//assuming rawJson contains the above data: 

var dataProvider = rawJson.map(function(jsonObj) { 
    return { 
    "title": jsonObj.MID.value, 
    "value": jsonObj.SUM_PTS.value 
    } 
});

这里表述为演示目的饼图您重新映射的数据：

var rawJson = [{ 
 
\t "SUM_PTS": { 
 
\t \t "datatype": "INTEGER", 
 
\t \t "length": "8", 
 
\t \t "value": "29903727", 
 
\t \t "obfuscated": "false" 
 
\t }, 
 
\t "SUM_TOTAL": { 
 
\t \t "datatype": "INTEGER", 
 
\t \t "length": "10", 
 
\t \t "value": "1644704985", 
 
\t \t "obfuscated": "false" 
 
\t }, 
 
\t "MID": { 
 
\t \t "datatype": "ALPHANUMERIC", 
 
\t \t "length": "27", 
 
\t \t "value": "Vendor 1", 
 
\t \t "obfuscated": "false" 
 
\t } 
 
}, { 
 
\t "SUM_PTS": { 
 
\t \t "datatype": "INTEGER", 
 
\t \t "length": "7", 
 
\t \t "value": "3283570", 
 
\t \t "obfuscated": "false" 
 
\t }, 
 
\t "SUM_TOTAL": { 
 
\t \t "datatype": "INTEGER", 
 
\t \t "length": "9", 
 
\t \t "value": "180596350", 
 
\t \t "obfuscated": "false" 
 
\t }, 
 
\t "MID": { 
 
\t \t "datatype": "ALPHANUMERIC", 
 
\t \t "length": "23", 
 
\t \t "value": "Vendor 2", 
 
\t \t "obfuscated": "false" 
 
\t } 
 
}] 
 

 
var dataProvider = rawJson.map(function(jsonObj) { 
 
    return { 
 
    "title": jsonObj.MID.value, 
 
    "value": jsonObj.SUM_PTS.value 
 
    } 
 
}); 
 

 
AmCharts.makeChart("chartdiv", { 
 
    "type": "pie", 
 
    "titleField": "title", 
 
    "valueField": "value", 
 
    "dataProvider": dataProvider 
 
})

<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="//www.amcharts.com/lib/3/pie.js"></script> 
 

 
<div id="chartdiv" style="width: 100%; height: 300px"></div>

来源

2017-10-13 00:33:51 xorspark

非常感谢@xorspark。我也使用dataloader从url加载JSON。关于dataprovider与dataloader结合的指针？ – Klaptrap

您可以在dataLoader中使用[postProcess回调]（https://github.com/amcharts/dataloader/#complete-list-of-available-dataloader-settings）在我的演示中执行相同的地图操作参数它传递并返回重新映射的数组，即''dataLoader：{url：/ *你的url在这里* /，postProcess：function（rawJson）{/ * map代码在这里，返回结果数组* /}}' – xorspark

具有详细JSON的Amcharts

回答

相关问题