悬停时，向工程图中的图例添加工具提示 [英] Add tooltip to legend in highcharts when hovering

问题描述

我想让用户知道他可以通过点击它们从图例中移除项目。对某些人来说，这可能很直观，但其他人可能不知道他们可以这样做。我想让用户知道他们何时可以点击删除它。

Id like to let the user know that he can remove items from the legend by simply clicking on them. To some, this may be intuitive but others may not know that they can do that. I would like to let the users know when they over the legend item that then can click to remove it.

我正在使用GWT包装类来制作highcharts。

I am using the GWT-wrapper class for highcharts.

谢谢。

推荐答案

在物品图例的工具提示中，但仍然可以为此创建自己的工具提示。向legendItem添加自定义事件很简单（例如mouseover和mouseout），并显示该工具提示。

Highcharts doesn't have built-in tooltip for item legend, but still you can create your own tooltip for that. It's simple to add custom events to legendItem (mouseover and mouseout for example) and show that tooltip.

查看如何将事件添加到Highcharts中的元素：http://jsfiddle.net/rAsRP/129/

See example how to add events to elements in Highcharts: http://jsfiddle.net/rAsRP/129/

        events: {
            load: function () {
                var chart = this,
                    legend = chart.legend;

                for (var i = 0, len = legend.allItems.length; i < len; i++) {
                    (function(i) {
                        var item = legend.allItems[i].legendItem;
                        item.on('mouseover', function (e) {
                            //show custom tooltip here
                            console.log("mouseover" + i);
                        }).on('mouseout', function (e) {
                            //hide tooltip
                            console.log("mouseout" + i);
                        });
                    })(i);
                }

            }
        }

这篇关于悬停时，向工程图中的图例添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！