懸停時在工程圖中添加工具提示圖標

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