自定义图例 pie highchart 到标签 div

Posted 2023-02-16

【中文标题】自定义图例 pie highchart 到标签 div

【英文标题】：Customize legend pie highchart into tag div

【发布时间】：2017-12-04 13:26:47

【问题描述】：

我成功将图例创建到外部 div 中，但是当单击外部图例时，图表上没有事件显示/隐藏系列。

我认为函数事件/加载有问题，但我仍然无法修复。

        events: 
            load: function () 
                var chart = this;
                $(chart.series[0].data).each(function (i, serie) 
                    $('<li style="color: ' + serie.color + '">' + serie.name + '</li>').click(function () 
                        serie.visible ? serie.hide() : serie.show();
                    ).appendTo('#legend');
                );
            
        

这是我的 jsfiddle：http://jsfiddle.net/hoanghoang3009/oepyvgtf/

谢谢！

【参考方案1】：

使用setVisible

Forked fiddle

 events: 
            load: function () 
                var chart = this;
                $(chart.series[0].data).each(function (i, serie) 
                //console.log(serie)
                    $('<li style="color: ' + serie.color + '">' + serie.name + '</li>').click(function () 
                        serie.visible ? serie.setVisible(false) : serie.setVisible(true);
                    ).appendTo('#legend');
                );
            
        

【讨论】：

这对我来说是个好答案。我阅读了关于 setVisible(boolean) 和 series.show() 和 series.hide() 的文档，据我了解，它看起来是一样的，但是为什么使用 setVisible() 是正确的而另一个是不正确的？

如控制台日志错误中所说的 serie.hide is not a function，因为它在您的帖子中是动态的，而 visible 是每个系列的属性，因此 setVisible 在我的帖子中有效