highcharts - 悬停时向高图中的图例添加工具提示

Question

我想让用户知道他可以通过简单地点击它们来从图例中删除它们。对某些人来说，这可能是直观的，但其他人可能不知道他们可以做到这一点。我想让用户知道他们何时超过了图例项，然后可以单击以将其删除。

我正在为 highcharts 使用 GWT-wrapper 类。

谢谢你。

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>';
}

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

Answer 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
    })
});