添加工具提示中highcharts传说中徘徊时，(Add tooltip to legend in

Id喜欢让用户知道他可以从图例只需点击他们删除项目。 一些人认为，这可能是直观的，但其他人可能不知道他们能做到这一点。 我想，让用户知道他们什么时候在那，然后可以点击删除图例项。

我使用GWT-包装类highcharts。

谢谢。

Answer 1:

Highcharts没有用于项目的传奇内置的工具提示，但你仍然可以创建自己该提示。 这是简单的添加自定义事件化LegendItem（鼠标悬停及移出为例）和显示工具提示。

见例如如何将事件添加到元素在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功能; 这个函数返回封闭到“跨越”标签的标签文本。 在这个“跨度”的标签的一个可以包括一类以应用基于jQuery的工具提示（jQuery的用户界面或自举例如）。 此外，它可以传送某些数据（例如，一个图例项的索引）使用“数据-XXX”属性：

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

工具提示可以根据需要进行格式化; 超链接也是可能的。 小提琴是在这里。

Answer 3:

你可以做到这一点。

起初，Highcharts有回调函数。
https://stackoverflow.com/a/16191017

而修改后的版本醉意可以显示SVG提示。
http://bl.ocks.org/ilyabo/1373263
*使用jquery.tipsy.js和tipsy.css此页面上。

然后，像这样开头highcharts。

$('#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
    })
});

文章来源: Add tooltip to legend in highcharts when hovering