详细的 Amcharts JSON

Question

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

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

SUM_PTS和MID好像不行。我认为这是因为我的 JSON 比示例中使用的更冗长。我无法更改 JSON 但是，我需要在 Amcharts Javascript.

中解决

Answer 1

由于 SUM_PTS 包含您的值，而 MID 包含您的标题，因此将其映射到简化的 dataProvider 格式非常简单：

//assuming rawJson contains the above data:

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

这是您重新映射的数据，以饼图形式表示以供演示：

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

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>

详细的 Amcharts JSON

Amcharts with verbose JSON

javascript

json

amcharts