如何在HighCharts折线图中勾选和取消所有图例元素？

Question

我希望能够一次性自定义所有复选框和单选框的图例元素，但是我不知道如何做，我们能实现吗？请告诉我方法。

- sakar

Answer 1

这是一个例子，它使用一系列外部控件来处理图例项和复选框的各种操作：

http://jsfiddle.net/simo/57SR9/94/

函数：

$('#checkAll').click(function(){
    for(i=0; i < chart.series.length; i++) {
        if(chart.series[i].selected == false){
            chart.series[i].select();
            showSeries.call(chart.series[i], {checked: true});
        }
    }
});

- jlbriggs

---

不错的演示。对于我已经拥有的图表（线形或饼状），使用select和showSeries方法的代码不能直接奏效。我的checkAll方法如下：$('#checkAll').click(function(){ for(i=0; i < chartVarName.series.length; i++) { if( chartVarName.series[i].visible == false){ chartVarName.series[i].show(); }}}); 基本上是使用series.visible + show/hide代替series.select()。 - ilinca

Answer 2

您可以迭代图表中的每个系列，并根据需要调用show()或hide()函数。这种解决方案与先前的答案类似，但使用show/hide函数进行调用。

i = 0;

while (i < chart.series.length) {
    if (chart.series[i].visible === false) { // here you can filter the visible series
        chart.series[i].select();
        chart.series[i].show(); // here you can call hide()
        i++;
        return;
    }
}

- Hugo Nugra

Answer 3

你可以使用类似这样的代码：

 var legendLeft = $j('<div>')
               .css({
                   width: 160,
                   maxHeight: 210,
                   padding: 10,
                   position: 'absolute',
                   overflow: 'auto',
                   right: 500,
                   top: 380,
                   borderRadius: options.borderRadius
               })
               .appendTo(chart.container);

           var legendRight = $j('<div>') .css({
                width: 260,
                maxHeight: 210,
                padding: 10,
                position: 'absolute',
                overflow: 'auto',
                right: 165,
                top: 383,
                borderRadius: options.borderRadius
           }).appendTo(chart.container);

请查看：http://highslide.com/forum/viewtopic.php?f=9&t=15782

示例1：http://jsfiddle.net/Fusher/ArmRM/14587/

示例2：http://jsfiddle.net/hfrntt/EQGWV/

- Lorenzo