les highcharts passent plusieurs valeurs à tooltip
j'ai besoin d'afficher des 3 valeurs sur l'info-bulle: le temps, la valeur et une autre valeur(modifier).
j'ai vu cet exemple<!-(Mais le jsdfiddle ne fonctionne pas).
j'ai essayé
//each loop..
indice.push(["time", "value1", "value2"]);
, les paramètres tooltip
tooltip:
{
useHTML: true,
formatter: function()
{
return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y + this.z(<-is this right?);
}
},
et la série
series:
[{
type: 'area',
data: indice
}]
est-ce que quelqu'un peut aider les SDP? thsnks.
5 réponses
si vous voulez transmettre des données supplémentaires pour un point autre que les valeurs x et y, alors vous devez nommer cette valeur. Dans la suite exemple j'Ajoute les trois valeurs supplémentaires suivantes à chaque point de données:
{
y: 3,
locked: 1,
unlocked: 1,
potential: 1,
}
alors pour accéder et afficher ces valeurs dans l'infobulletin j'utilise ce qui suit:
tooltip:
{
formatter: function() { return ' ' +
'Locked: ' + this.point.locked + '<br />' +
'Unlocked: ' + this.point.unlocked + '<br />' +
'Potential: ' + this.point.potential;
}
}
j'ai pensé à elle, Je passe 3 valeurs dans le tableau de données
indice.push([(new Date(value.x)).getTime(), val_change[0], val_change[1]]);
série: [{ type: 'zone', nom: titleindice, données: indice, showInLegend: false/ / désactiver l'icône show / hide }]
et dans l'info-bulle
tooltip:
{
useHTML: true,
formatter: function()
{
var color = "";
return Highcharts.dateFormat('%H:%M:%S', this.x) + this.y + this.point.config[2] ;
}
},
deux façons.
1
series: [
{ ...
tooltip:
{pointFormat: "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y} {y2}</b><br/>"}
}, ...
]
o = Highcharts.Point.prototype.tooltipFormatter
Highcharts.Point.prototype.tooltipFormatter=function(format){return o.call(this, format).replace("{y2}", this.config[2]);}
2
a = new Highcharts.StockChart(options);
a.series[0].tooltipFormatter = function(item) { return "<span style=\"color:{" + item.series.color+"\">" +item.series.name+"</span>: <b>"+item.y+item.point.config[2]+"</b><br/>"; }
si vous, dans un graphique Highstocks multi-séries, voulez afficher des données spécifiques à une série dans le tooltip, vous pouvez faire quelque chose comme ça.
var series = [];
// Populate our series
series.push({
name: "small_cities",
displayName: "Small Cities",
color: "#123456",
data: [...]
});
series.push({
name: "Countries",
displayName: "Countries",
color: "#987654",
data: [...]
});
chart: {
...
tooltip: {
formatter: function() {
var s = '';
$.each(this.points, function(i, point) {
s += '<br /><span style="color:' + this.series.color + '">' +
point.series.userOptions.displayName + '</span>: ' + point.y;
});
return s;
}
},
...
}
Maintenant, vous verrez les noms de belles séries "petites villes" au lieu de la série.nom (small_cities). Tous les attributs que vous définissez sur la série peuvent être trouvés dans this.points[].series.userOptions.
Pour plus d'options de formatage, jetez un coup d'oeil à la Highstocks docs.
ce que j'ai essayé c'est de concaténer le nom de la série avec les valeurs X-axis et Y-axis et ça marche très bien pour moi. Ce problème que vous rencontrez?
tooltip: { formatter: function () { return this.x + ': ' + this.series.name + ': ' + this.y; } }