Question

我试图找出amcharts是否有设施将传说作为复选框就像highcharts一样。这里有一些例子 -

    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

我试图将复选框放在图表和图表之外。添加听众和等等。它变得复杂了。所以想知道是否有人有这个要求＆amp;已设法实施它？

任何帮助都会非常有用。

Answer 1

你去了：

首先，我们必须添加eventlisteners以在每次重绘图表时创建框。（这是必要的，因为复选框是图例的子元素，每次图表都会重新创建图例）

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));
}

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

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

那就是它。 Demo

Amcharts - 复选框图例

1 个答案: