NVD3 TooltipContent non funziona

Sto usando la libreria NVD3 per il mio progetto e ho scritto il seguente codice.NVD3 TooltipContent non funziona

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

L'output previsto dovrebbe essere quello di mostrare ciao al passaggio del mouse. Ma non capisco, invece ottengo il suggerimento predefinito.

Per favore fatemi sapere l'errore che sto facendo.

fonte

2014-10-19 Jayendra Gothi

possibile duplicato del [piechart nvd3. js - Come modificare il suggerimento?] (http://stackoverflow.com/questions/12416508/nvd3-piechart-js-how-to-edit-the-t ooltip) – shabeer90

Ho capito ora la linea. useInteractiveGuideline (true) non è corretta. dovrebbe essere. useInteractiveGuideline (false). Poiché la descrizione comando personalizzata non può esistere con "useInteractiveGuideline" suggerito dall'utente2612936 su http://stackoverflow.com/questions/12416508/nvd3-piechart-js-how-to-edit-theoltip –

Grazie a shabeer90 per dirigere al posto giusto . –

Potresti per favore creare un violino o un plunkr per questo? Qui di seguito è la realizzazione del nostro codice di progetto, restituisce un elemento HTML funziona un bene:

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

fonte

2014-10-20 05:56:49

E 'ora possibile avere contenuti personalizzati con le linee guida interattiva a partire dalla versione 1.8.1 (https://github.com/novus/nvd3/tree/v1.8.1-alpha).

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

fonte

2015-03-12 00:09:43 Pim

Sì .. funziona bene .. Grazie –

funziona per me. grazie. –

Grazie. Questo funziona anche per angular-nvd3. 'interactiveLayer: { tooltip: { contentGenerator: function (data) { console.log ('tooltip', data); } } } ' –

A partire dalla versione 1.8+ nvd3 utilizzare il metodo chart.tooltip.contentGenerator() invece di .tooltipContent()

Ad esempio:

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

Maggiori informazioni qui - https://github.com/novus/nvd3/issues/1359

fonte

2016-10-06 17:26:53

risposta

Problemi correlati