悬停时将工具提示添加到highcharts中的图例

Question

我想让用户知道他只需单击它就可以从图例中删除项目.对某些人来说,这可能是直观的,但其他人可能不知道他们可以做到这一点.我想让用户知道他们什么时候可以点击以删除它.

我正在使用GWT-wrapper类进行highcharts.

谢谢.

Answer 1

Highcharts没有项目图例的内置工具提示,但您仍然可以为此创建自己的工具提示.将自定义事件添加到legendItem(例如mouseover和mouseout)并显示工具提示很简单.

请参阅示例如何向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);
                }

            }
        }

Answer 2

还有另一个机会在将鼠标悬停在 Highcharts 图例上时获得工具提示。您只需要为图例启用 useHTML 并重新定义 labelFormatter 函数；此函数应返回包含在“span”标签中的标签文本。在这个“span”标签中，可以包含一个类来应用基于 jQuery 的工具提示（例如 jQuery UI 或 Bootstrap）。还可以使用 'data-xxx' 属性传输一些数据（例如，图例项的索引）：

labelFormatter: function () {
    return '<span class="abc" data-index="' + this.index + '">' + this.name + '</span>';
}

工具提示可以根据需要设置格式；超链接也是可能的。小提琴在这里。