循环遍历amcharts堆叠柱状图的每个对象属性
循环遍历amcharts堆叠柱状图的每个对象属性
提问于 2018-06-03 12:49:49
嗨，我正在使用ajax获取php mysql数据，并将其显示到amcharts堆叠柱状图，但由于我正在处理堆叠柱状图，因此我需要分别定义每个标题和值域，以生成图表的每个系列。
这是我的jsfiddle：http://jsfiddle.net/o7cm6nkh/
有没有办法遍历每个属性名？产生这样的输出，而不是通过手动插入它们？
{
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
},
"fillAlphas": 0.8,
"labelText": "[[title]]<br>" + "[[value]]",
"labelPosition": "middle",
"lineAlpha": 0.3,
"title": "MAN",
"type": "column",
"color": "#000000",
"valueField": "MAN"
}, {
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
},
"fillAlphas": 0.8,
"labelText":"[[title]]<br>" + "[[value]]",
"labelPosition": "middle",
"lineAlpha": 0.3,
"title": "PAN",
"type": "column",
"color": "#000000",
"valueField": "PAN"
},
{
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
},
"fillAlphas": 0.8,
"labelText":"[[title]]<br>" + "[[value]]",
"labelPosition": "middle",
"lineAlpha": 0.3,
"title": "DAV",
"type": "column",
"color": "#000000",
"valueField": "DAV"
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-04 03:59:40
您可以定义一个模板，该模板具有所有所需的不更改的图形设置属性，然后使用数据中的其他属性动态创建图形数组，并在执行过程中设置其他字段。由于您很有可能预先知道标题将是什么，因此您可以简单地循环遍历响应的第一个数组元素中的其余属性，并设置您的categoryField和valueField，因为这是唯一更改的值。
假设您的categoryField始终为name
var graphs = Object.keys(response[0]).reduce(function(graphsArray, key) {
if (key !== "name") {
graphsArray.push({
"fillAlphas": 0.8,
"labelText": "[[title]]<br>" + "[[value]]",
"labelPosition": "middle",
"lineAlpha": 0.3,
"title": key,
"type": "column",
"color": "#000000",
//"showAllValueLabels": true,
"valueField": key
});
}
return graphsArray;
}, []);
// ...
var AmCharts.makeChart("chartdiv", {
// ...
"graphs": graphs,
// ...
});(请注意，numberFormatter不是图形级属性，而是顶级图表对象属性)
更新的fiddle：http://jsfiddle.net/o7cm6nkh/2/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50663404
复制相关文章
相似问题