Hinzufügen von QuickInfo zur Legende in Highcharts beim Schweben

Question

Ich möchte dem Benutzer mitteilen, dass er Elemente aus der Legende entfernen kann, indem er einfach darauf klickt. Für manche mag das intuitiv sein, aber andere wissen vielleicht nicht, dass sie das können. Ich möchte die Benutzer wissen lassen, wenn sie das Legendenelement überfliegen, das dann klicken kann, um es zu entfernen.

Ich verwende die GWT-Wrapper-Klasse für Highcharts.

Vielen Dank.

Answer 1

Highcharts hat keine integrierte QuickInfo für die Artikellegende, aber Sie können trotzdem Ihren eigenen Tooltipp erstellen. Es ist einfach, benutzerdefinierte Ereignisse zu legendElement hinzuzufügen (mouseover und mouseout zum Beispiel) und diese Tooltip anzuzeigen.

Beispiel ansehen, wie Ereignisse Elemente in Highcharts hinzuzufügen: 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

Es gibt eine andere Möglichkeit ist Tooltips zu bekommen über die Highcharts Legende schwebt. Sie müssen nur "useHTML" für die Legende aktivieren und die labelFormatter-Funktion neu definieren. Diese Funktion sollte den Etikettentext zurückgeben, der in das "span" -Tag eingeschlossen ist. In diesem "span" -Tag kann eine Klasse enthalten sein, um jQuery-basierte Tooltips (jQuery UI oder Bootstrap zum Beispiel) anzuwenden. Auch ist es möglich, einige Daten übertragen (zum Beispiel der Index einer Legende Element) mit dem ‚Daten-xxx‘ Attribut:

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

Tooltips können formatiert werden, wie Sie wollen; Hyperlinks sind ebenfalls möglich. The fiddle is here.

Answer 3

Sie können das tun.

Highcharts hat zunächst Callback-Funktion.
https://stackoverflow.com/a/16191017

Und modifizierte Version Tipsy kann Tooltip in SVG zeigen.
http://bl.ocks.org/ilyabo/1373263
* Verwenden Sie jquery.tipsy.js und tipsey.css auf dieser Seite.

Dann starten Highcharts wie folgt.

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