我正在使用Amcharts显示图表图表和带有图例的饼图,并从json文件中提取数据:
$(function() {
$.getJSON('http://107.170.203.64/jsonp.php?callback=?', function(data) { ... } ); });
这是我得到的json数据:
?([[{"country":"Utilities","litres":501.9,"color":"#1faf4b"},{"country":"Insurance","litres":301.9,"color":"#79cf93"},{"country":"Telcos","litres":201.1,"color":"#a5dfb7"},{"country":"Entertainment","litres":165.8,"color":"#d2efdb"},{"country":"Other","litres":139.9,"color":"#ffffff"}],[{"income":53.5,"expenses":18.1,"value":60.307,"year":2009,"date":"20093rd MAR","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2009,"income":26.2,"expenses":22.8,"value":10.168,"date":"20093rd Apr","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2009,"income":30.1,"expenses":23.9,"value":20.073,"date":"20093rd May","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2009,"income":29.5,"expenses":25.1,"value":30.027,"date":"20093rd June","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2009,"income":50.6,"expenses":27.2,"value":10.251,"dashLengthLine":5,"date":"20093rd Jul","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2009,"income":34.1,"expenses":29.9,"dashLengthColumn":5,"alpha":0.2,"value":50.281,"additional":"(projection)","date":"20093rd Aug","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2009,"income":53.5,"expenses":18.1,"value":60.307,"date":"20093rd Sep","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2009,"income":26.2,"expenses":22.8,"value":10.168,"date":"20093rd Oct","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2009,"income":30.1,"expenses":23.9,"value":20.073,"date":"20093rd Nov","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2009,"income":29.5,"expenses":25.1,"value":30.027,"date":"20093rd Dec","color":["#178539","#1faf4b"],"strColor":"white"},{"income":53.5,"expenses":18.1,"value":60.307,"year":2010,"date":"20103rd MAR","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2010,"income":26.2,"expenses":22.8,"value":10.168,"date":"20103rd Apr","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2010,"income":30.1,"expenses":23.9,"value":20.073,"date":"20103rd May","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2010,"income":29.5,"expenses":25.1,"value":30.027,"date":"20103rd June","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2010,"income":50.6,"expenses":27.2,"value":10.251,"date":"20103rd Jul","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2010,"income":34.1,"expenses":29.9,"value":50.281,"date":"20103rd Aug","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2010,"income":53.5,"expenses":18.1,"value":60.307,"date":"20103rd Sep","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2010,"income":26.2,"expenses":22.8,"value":10.168,"date":"20103rd Oct","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2010,"income":30.1,"expenses":23.9,"value":20.073,"date":"20103rd Nov","color":["#178539","#1faf4b"],"strColor":"white"},{"year":2017,"income":29.5,"expenses":25.1,"value":30.027,"date":"20173rd Dec","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":53.5,"expenses":18.1,"value":60.307,"date":"20117rd MAR","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":26.2,"expenses":22.8,"value":10.168,"date":"20117rd Apr","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":30.1,"expenses":23.9,"value":20.073,"date":"20117rd May","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":29.5,"expenses":25.1,"value":30.027,"date":"20173rd June","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":50.6,"expenses":27.2,"value":10.251,"dashLengthLine":5,"date":"20173rd Jul","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":34.1,"expenses":29.9,"dashLengthColumn":5,"alpha":0.2,"value":50.281,"date":"20173rd Aug","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":53.5,"expenses":18.1,"value":60.307,"date":"20173rd Sep","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":26.2,"expenses":22.8,"value":10.168,"date":"20173rd Oct","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":30.1,"expenses":23.9,"value":20.073,"date":"20173rd Nov","color":["#FFFFFF","#cccccc"],"strColor":"black"},{"year":2017,"income":29.5,"expenses":25.1,"value":30.027,"date":"20173rd Dec","color":["#FFFFFF","#cccccc"],"strColor":"black"}]])
然而,饼图的图例似乎是循环并显示标签两次:
// populate custom legend when chart renders
chart.customLegend = document.getElementById('legend');
for (var i in chart.chartData) {
var row = chart.chartData[i];
var color = chart.dataProvider[i].color;
legend.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" style="color: ' + "#777777" + ';"><div class="legend-marker" style="background: ' + color + '"></div>' + row.title+'</div>';
}
如何避免循环?
非常感谢你的帮助!
答案 0 :(得分:0)
发现问题,我删除了$ .each函数