NVD3 TooltipContent funktioniert nicht

Ich benutze NVD3-Bibliothek für mein Projekt und ich habe folgenden Code geschrieben.NVD3 TooltipContent funktioniert nicht

var chart = nv.models.lineChart() 
      .useInteractiveGuideline(true) 
      .margin({top: 50, right: 50, bottom: 50, left: 50}) 
      .tooltipContent(function (key, y, e, graph) { 
       console.log("helo"); 
       return "hello"; 
      });

Erwartete Ausgabe sollte hallo auf Maus über zeigen. Aber ich bekomme das nicht, stattdessen bekomme ich den Standard-Tooltip.

Bitte lassen Sie mich wissen, den Fehler, den ich tue.

Quelle

2014-10-19 Jayendra Gothi

möglich Duplikat [nvd3 piechart. js - Wie bearbeite ich den Tooltip?] (http://stackoverflow.com/questions/12416508/nvd3-pechart-js-how-to-edit-the-t ooltip) – shabeer90

Ich habe jetzt die Zeile .useInteractiveGuideline (true) ist nicht korrekt. es sollte .useInteractiveGuideline (false) sein. Als Customized Tooltip kann nicht mit "useInteractiveGuideline" von user2612936 auf http://StackOverflow.com/questions/12416508/nvd3-piechart-Jshow-to-edit-the-tooltip –

vorgeschlagen Dank shaabeer90 für die Ausrichtung auf den richtigen Beitrag . –

Könnten Sie bitte eine Geige oder Plunkr dafür erstellen? Below Umsetzung unseres Projektcode ist, es gibt ein HTML-Elemente eine gut funktioniert:

.tooltipContent(function (key, x, y, e) { 
          if (e.value >= 0) { 
           return '<h3>' + key + '</h3>' + 
            '<p>' + y + ' at ' + x + '</p>'; 
          } else { 
           return ''; 
          } 
         });

Quelle

2014-10-20 05:56:49

Es ist nun möglich, benutzerdefinierte Inhalte mit interaktiven Richtlinien ab Version 1.8.1 (https://github.com/novus/nvd3/tree/v1.8.1-alpha) zu haben.

chart.interactiveLayer.tooltip.contentGenerator(function(data) { 
    return 'this is my custom content'; 
});

Quelle

2015-03-12 00:09:43 Pim

Yup .. das funktioniert gut .. Danke –

funktioniert für mich. Danke. –

Danke. Dies funktioniert auch für angular-nvd3. 'interactiveLayer: { Tooltipp: { contentGenerator: Funktion (Daten) { console.log ('Tooltip', Daten); } } } ' –

mit nvd3 Ab Version 1.8+ die Methode verwendet chart.tooltip.contentGenerator() statt .tooltipContent()

Zum Beispiel:

chart.tooltip.contentGenerator(function(data) { 
     return '<p>' + data.point.x + '</p>' 
    }

Mehr Infos hier - https://github.com/novus/nvd3/issues/1359

Quelle

2016-10-06 17:26:53

Antwort

Verwandte Themen