comment définir la couleur du texte de l'info-bulle dans un graphique en flèches?

Question

J'utilise un diagramme de flot avec des données de séries multiples. Je veux changer la couleur du texte de l'info-bulle dans Flot Chart. J'utilise ce code:

$("#placeholder").bind("plothover", function (event, pos, item) { 
if (item) { 
    $("#tooltip").remove(); 
    var hoverSeries = item.series; 
    var x = item.datapoint[0], 
     y = item.datapoint[1]; 
    var strTip = x + "/" + y + " for " + item.series.label; 

    var allSeries = plot.getData(); 
    $.each(allSeries, function(i,s){ 
     if (s == hoverSeries) return; 
     $.each(s.data, function(j,p){ 
      if (p[0] == x){ 
       strTip += "</br>" + p[0] + "/" + p[1] + " for " + s.label; 
      } 
     });    
    }); 
    showTooltip(item.pageX, item.pageY, strTip); 
    } 
}); 

une couleur pour la prise en infobulle?

Answer 1

tableau Flot prend en charge les balises HTML info-bulle

Vous pouvez facilement utiliser la balise html: <span>

Flot tableau infobulle supporter facilement des balises HTML. Avec la balise <span>, vous pouvez utiliser s.clor avec style. Comme ceci js.

$("#placeholder").bind("plothover", function (event, pos, item) { 
if (item) { 
    $("#tooltip").remove(); 
    var hoverSeries = item.series; 
    var x = item.datapoint[0], 
     y = item.datapoint[1]; 
    var strTip = "<span style=\"color:" + item.series.color + ";\""+x + "/" + y + " for " + item.series.label + "</span>"; 

    var allSeries = plot.getData(); 
    $.each(allSeries, function(i,s){ 
     if (s == hoverSeries) return; 
     $.each(s.data, function(j,p){ 
      if (p[0] == x){ 
       strTip += "</br><span style=\"color:" + s.color + ";\"" + p[0] + "/" + p[1] + " for " + s.label + "</span>"; 
      } 
     });    
    }); 
    showTooltip(item.pageX, item.pageY, strTip); 
    } 
}); 

Ici clairement, j'ai utilisé item.series.color et s.color dans strTip chaîne de infobulle

Answer 2

Veuillez utiliser cette chaîne à la place de votre strTip.

strTip += "</br><span style=\"color:"+s.color+";\">" + p[0] + "/" + p[1] + " for " + s.label+"</span>"; 

En utilisant cette chaîne, vous obtiendrez la même couleur du texte de l'info-bulle que la couleur de votre série de données. ici, j'ai utilisé cela pour 4 séries de données dans un seul flotchart. [Quatre Astuce série d'outils] [1]