【问题标题】:Amchart legend is loopingAmchart 传奇正在循环播放
【发布时间】:2016-11-10 04:46:14
【问题描述】:

我正在使用 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>';
        }

如何避免循环?

非常感谢您的帮助!

【问题讨论】:

  • 您可以发布您的 JSON 数据吗?那里可能有重复项导致问题。
  • 嗨 xorspark,我已经发布了 json 数据

标签: javascript amcharts


【解决方案1】:

发现问题,我把$.each函数去掉了

【讨论】:

  • 代码 sn-p 中没有每个函数。我在图表和图例部分看到一个数据是双倍的
猜你喜欢
  • 1970-01-01
  • 2020-01-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-09-29
  • 2011-12-06
  • 2012-03-16
  • 1970-01-01
相关资源
最近更新 更多