Nvd3 piechart.js – Comment modifier la info-bulle?

Il suffit de remplacer de cette façon, il fonctionnera certainement

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

Ou

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

Je viens d'avoir le même problème, avec nvd3 1.8.1, et c'est la solution que j'ai trouvée.

Sans l'option useInteractiveGuideline vous pouvez simplement déclarer votre fonction génératrice d' chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE}) dans chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE}) :

L'argument d est donné par nvd3 lors de l'appel de la info-bulle, et il possède trois propriétés:

• value : la valeur de l'axe des x pour la position du curseur
• index : l'indice dans la datum du diagramme correspondant à la position du curseur
• series : un tableau contenant, pour chaque élément du tableau:
  • key : la clé de légende pour cet élément
  • value : la valeur de l'axe y pour cet élément à la position du curseur
  • color : la couleur de la légende pour cet élément

Donc, voici un exemple:

 chart.tooltip.contentGenerator(function (d) { var html = "<h2>"+d.value+"</h2> <ul>"; d.series.forEach(function(elem){ html += "<li><h3 style='color:"+elem.color+"'>" +elem.key+"</h3> : <b>"+elem.value+"</b></li>"; }) html += "</ul>" return html; }) 

Note importante

Lorsque l'option useInteractiveGuideline est utilisée, l'objet chart.tooltip n'est pas utilisé pour générer la info-bulle, vous devez plutôt utiliser le chart.interactiveLayer.tooltip , c'est-à-dire:

 this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... }) 

J'espère que la réponse vous sera utile, même si tard.

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

Pour ajouter aux réponses précédentes, vous souhaitez parfois utiliser les données de la série et non seulement de x et 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 que la souris e.pointIndex , e.pointIndex est l'index sur les valeurs de la série. Ici e.series.key == key , mais j'ai e.series ce qu'est e.series .

Si vous utilisez l'enveloppe Angular NVD3 , la façon de définir le message personnalisé se fait par des options de graphique, simplement:

 $scope.options = { chart: { ... tooltip: { contentGenerator: function(d) { return d.series[0].key + ' ' + d.series[0].value; } }, ... } }; 

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

Je pense que vous manquez le paramètre 'x' dans votre fonction tooltip. Le format de l'appel de fonction est le suivant:

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

 var chart = nv.models.multiBarChart(); chart.tooltip.contentGenerator(function (obj) { return JSON.stringify("<b>HOHO</b>") }) 

Cela a fonctionné pour moi …