Amcharts - 复选框图例

问题描述：

我正在尝试查找amcharts是否具有像highchart一样具有传奇功能的复选框。在这里的一些例子 -Amcharts - 复选框图例

http://stackoverflow.com/questions/19174158/in-highchart-legend-want-to-bring-checkbox-at-start 
    http://jsfiddle.net/lukelarsen/yHGS9/9/ 
http://flexdevtips.blogspot.co.nz/2009/10/linechart-with-checkbox-legend.html

我试图把复选框图表外&添加监听&等等。它变得复杂。所以想知道如果有人有这个要求&已经设法实现它？

任何帮助将非常有帮助。

AmCharts图例的工作原理与复选框一样。 – gerric

你好Gerric - 谢谢。我同意它有复选框效果。我希望有一个复选框，以提高用户友好性。这可能吗？ – usert4jju7

答

你去那里：

首先我们要添加事件监听器创建每次图表重绘框。（这是必要的，因为复选框是传说中的子元素和传说是重建每次发生某事与图表）

chart.addListener("init", function() { 
    chart.addListener("drawn", createCheckboxes); 
    chart.legend.addListener("showItem", createCheckboxes); 
    chart.legend.addListener("hideItem", createCheckboxes); 
}

然后，我们正在为每个图例项的一个复选框。

function createCheckboxes() { 
    var legend = chart.legend.legendData; 
    var div = $("<div style='position:absolute; top: 10px'></div>"); 
    for(var i = 0; i < legend.length; i++) { 
     div.append("<input style='float: left; " 
      + "position: absolute; top:" + legend[i].legendEntry.y + "px' " 
      + "type='checkbox'" + (legend[i].hidden ? " " : " checked ") 
      + "onclick=toggleItem(" + i + ")></input>"); 
    } 
    div.appendTo($(chart.legend.div)); 
}

最后一步是处理复选框上的点击事件。

var toggleItem = function(i) { 
    chart.legend.clickLabel(chart.legend.legendData[i], event); 
}

就是这样。 Demo

这就是我所需要的。你是一个明星@ gerric – Coder

Amcharts - 复选框图例

相关推荐