nvd3 piechart.js - Comment modifier l'infobulle ?

Question

J'utilise le composant piechart.js de nvd3 pour générer un camembert sur mon site. Le fichier .js fourni comprend plusieurs var's, comme suit :

var margin = {top: 30, right: 20, bottom: 20, left: 20}
    , width = null
    , height = null
    , showLegend = true
    , color = nv.utils.defaultColor()
    , tooltips = true
    , tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + '</p>'
      }
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;

Dans mon js en ligne, j'ai pu remplacer certaines de ces variables, comme ceci (remplacement de showLegend et margin) :

var chart = nv.models.pieChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .showLabels(false)
    .showLegend(false)
    .margin({top: 10, right: 0, bottom: 0, left: 0})
    .donut(true);

J'ai essayé d'écraser l'infobulle de la même manière :

.tooltip(function(key, y, e, graph) { return 'Some String' })

mais lorsque je fais cela, mon camembert ne s'affiche pas du tout. Pourquoi ne puis-je pas écraser l'info-bulle ici ? Existe-t-il un autre moyen de le faire ? Je préférerais vraiment ne pas avoir à modifier piechart.js lui-même ; j'ai besoin de garder ce fichier générique pour l'utiliser dans plusieurs widgets.

Et pendant que nous y sommes, y a-t-il un moyen de transformer toute l'infobulle en un lien cliquable ?

Answer 1

Il suffit de passer outre de cette manière pour que cela fonctionne définitivement.

function tooltipContent(key, y, e, graph) {
            return '<h3>' + key + '</h3>' +'<p>' + y + '</p>' ;
        }

Ou

tooltipContent(function(key, y, e, graph) { return 'Some String' })

Answer 2

L'info-bulle personnalisée ne peut pas exister avec "useInteractiveGuideline".

Answer 3

Pour ajouter aux réponses précédentes, parfois vous voulez utiliser les données de la série et pas seulement de x y y . Par exemple, lorsque

data = {'values': [{'month': 1, 'count': 2}, ...], 'key': 'test' }

Pour ces situations, utilisez

.tooltip(function(key, x, y, e, graph) {
         var d = e.series.values[e.pointIndex];
         return '<h3>' + e.series.key + '</h3><p>' + d.month.toString() + ...;
 });

e.series est la série particulière sur laquelle la souris se trouve, e.pointIndex est l'indice sur les valeurs de la série. Ici e.series.key == key mais j'avais de l'empathie pour ce qui est e.series .

Answer 4

my_chart = nv.models.multiBarChart()
  .tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
  });

Answer 5

Je pense qu'il vous manque le paramètre 'x' dans votre fonction tooltip. Le format de l'appel de fonction est :

function(key, x, y, e, graph)