web-dev-qa-db-fra.com

nvd3 fragmenthart.js - Comment modifier l'info-bulle?

J'utilise le composant fragmenthart.js de nvd3 pour générer un diagramme graphique sur mon site. Le fichier .js fourni comprend plusieurs var, 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 mes 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'info-bulle de la même manière:

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

mais quand je le fais, mon diagramme ne s'affiche pas du tout. Pourquoi ne puis-je pas remplacer l'infobulle ici? Y a-t-il une autre façon de le faire? Je préférerais vraiment ne pas avoir à éditer du tout le fichier morceau.js; 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 l'intégralité de l'infobulle en un lien cliquable?

javascripttooltipd3.jspie-chartnvd3.js
40
kage23

Remplacez simplement de cette façon, cela 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' })
56
user1847371

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 de génération d'infobulles dans chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE}):

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

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

Voici donc 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;
        })

Remarque importante

Lorsque l'option useInteractiveGuideline est utilisée, le chart.tooltip l'objet n'est pas utilisé pour générer l'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 en retard.

37
LostInBrittany

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

15
user2612936

Si vous utilisez le wrapper Angular NVD , la façon de définir le message personnalisé consiste à utiliser les options du graphique, simplement:

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

Pour compléter les réponses précédentes, vous souhaitez parfois utiliser les données de la série et pas 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 de la souris, e.pointIndex est l'indice des valeurs de la série. Ici e.series.key == key, mais j'avais de l'empathie pour ce qui est e.series.

5
Jorge Leitão
my_chart = nv.models.multiBarChart()
  .tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
  });
4
Aleck Landgraf

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

function(key, x, y, e, graph)
2
jbizzle
var chart = nv.models.multiBarChart();

chart.tooltip.contentGenerator(function (obj) {
                return JSON.stringify("<b>HOHO</b>")
            })

Cela a fonctionné pour moi ...

1
Doctor