悬停时在工程图中添加工具提示图标

Question

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

我正在使用GWT包装类为highcharts。

谢谢。

Answer 1

Highcharts没有内置的item legend的工具提示，但仍然可以为此创建自己的工具提示。将自定义事件添加到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）。此外，它可以传送某些数据（例如，一个图例项的索引）使用“数据-XXX”属性：

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

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

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