如何选中和取消选中HighCharts线图中的所有图例元素

How to Check and Uncheck all the Legend elements in HighCharts Linechart?

本文关键字:元素 HighCharts 何选中 取消      更新时间:2023-09-26

我想一次性定制选中和取消选中图例元素,我没有任何想法,我们可以这样做吗?

这个例子就是这样做的,加上各种其他的图例项和复选框,使用一系列外部控件:

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

您可以遍历图表中的每个系列并调用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;
    }
}

你可以这样写:

 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://hililide.com/forum/viewtopic.php?f=9&t=15782

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

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