web-dev-qa-db-fra.com

les diagrammes passent plusieurs valeurs à l'infobulle

J'ai besoin d'afficher 3 valeurs sur l'infobulle: l'heure, la valeur et une autre valeur (changement).

J'ai vu cet exemple (mais le jsdfiddle ne fonctionne pas).

J'ai essayé

//each loop..
indice.Push(["time", "value1", "value2"]);

, les paramètres de l'infobulle

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
}]

quelqu'un peut-il aider les pls? Thsnks.

javascripttooltiphighcharts
22
devmonster

Si vous souhaitez transmettre des données supplémentaires pour un point autre que les valeurs x et y, vous devez nommer cette valeur. Dans l'exemple suivant j'ajoute les trois valeurs supplémentaires suivantes à chaque point de données:

{
  y: 3,
  locked: 1,
  unlocked: 1,
  potential: 1,
}

Ensuite, pour accéder et afficher ces valeurs dans l'info-bulle, j'utilise ce qui suit:

tooltip: 
{
     formatter: function() { return ' ' +
        'Locked: ' + this.point.locked + '<br />' +
        'Unlocked: ' + this.point.unlocked + '<br />' +
        'Potential: ' + this.point.potential;
     }
}
43
Linger

Si vous, dans un graphique Highstocks multi-séries, souhaitez afficher des données spécifiques à la série dans l'info-bulle, vous pouvez faire quelque chose comme ceci.

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;
    }
  },

  ...
}

Vous verrez maintenant de jolis noms de séries "Small Cities" au lieu de series.name (small_cities). Tous les attributs que vous définissez sur la série se trouvent dans this.points[].series.userOptions. Pour plus d'options de formatage, jetez un œil aux Highstocks docs .

7
MyGGaN

deux manières.

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/>"; }
5
poordeveloper

Je l'ai compris, je passe 3 valeurs dans le tableau de données

indice.Push([(new Date(value.x)).getTime(), val_change[0], val_change[1]]);

series: [{type: 'area', nom: titleindice, data: indice, showInLegend: false // désactiver l'icône afficher/masquer}]

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] ;

                    }
                },
5
devmonster

Ce que j'ai essayé est de concaténer le nom de la série avec la valeur de l'axe x et de l'axe y et cela fonctionne très bien pour moi. À quel problème vous êtes confronté?

tooltip: { formatter: function () { return this.x + ': ' + this.series.name + ': ' + this.y; } }
4
Fraz Sundal