javascript - 带有详细 JSON 的 Amcharts

Question

[{"SUM_PTS":{"数据类型":"INTEGER","长度":"8","值":"29903727","混淆":"假"},"SUM_TOTAL":{"数据类型":"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","混淆":"假"},"SUM_TOTAL":{"数据类型":"INTEGER","长度":"9","值":"180596350","混淆":"假"},"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>