ホバーするときにハイチャートの凡例にツールチップを追加

Question

Idをクリックするだけで凡例から項目を削除できることをユーザーに知らせるのが好きです。一部の人にとっては、これは直感的かもしれませんが、他の人がそうすることができるのか分からないかもしれません。凡例の項目をクリックすると、その項目をクリックして削除することができるようになりました。

ハイチャートにはGWT-wrapperクラスを使用しています。

ありがとうございます。

Answer 1

ハイチャートにはアイテム凡例用のツールチップが組み込まれていませんが、独自のツールチップを作成することはできます。 legendItem（mouseoverやmo​​useoutなど）にカスタムイベントを追加し、そのツールチップを表示するのは簡単です。

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