悬停时向高图中的图例添加工具提示答案

【问题标题】：Add tooltip to legend in highcharts when hovering悬停时向高图中的图例添加工具提示
【发布时间】：2013-04-21 23:52:36
【问题描述】：

我想让用户知道他可以通过单击图例中的项目来删除它们。对某些人来说，这可能是直观的，但其他人可能不知道他们可以做到这一点。我想让用户知道他们什么时候在图例项上，然后可以点击删除它。

我将 GWT 包装类用于 highcharts。

谢谢。

【问题讨论】：

标签： highcharts gwt-highcharts

【解决方案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);
                }

            }
        }

【讨论】：

如何将此功能添加到我的 Java 代码中？因为我使用 GWT。我正在尝试 chart.setOption("/chart/events/load", "load: function()... ) 但这似乎不起作用
抱歉，我不熟悉 Highcharts 的 GWT 适配器。

【解决方案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>';
}

工具提示可以根据需要进行格式化；超链接也是可能的。 The fiddle is here.

【讨论】：

【解决方案3】：

你可以这样做。

一开始，Highcharts 有回调函数。
https://stackoverflow.com/a/16191017

修改后的Tipsy可以在SVG中显示工具提示。
http://bl.ocks.org/ilyabo/1373263
*在此页面上使用 jquery.tipsy.js 和 Tipsy.css。

然后，像这样开始高图表。

$('#your-chart').highcharts(your_chart_options,function(chart){
    $('#your-chart').find('.highcharts-legend-item').each(function(){
        // set title text example
        var _text = $(this).text(),
            _title = '';
        switch(_text){
            case "legend 1":
                _title = 'legend 1 title';
                break;
            case "legend 2":
                _title = 'legend 2 title';
                break;
        }
        // add <title> tag to legend item
        $(this).append($('<title></title>').text(_title));
    });
    $('#your-chart').find(".highcharts-legend-item").tipsy({
        gravity: 's',
        fade: true
    })
});

【讨论】：