web-dev-qa-db-fra.com

Légende personnalisée Highcharts

Comment puis-je personnaliser les légendes

De 

 custom

Pour ça

 desired

highcharts
4
Miftah Farid

vérifiez les options highcharts legend api.Vous pouvez personnaliser davantage avec les fichiers css souhaités. utilisez la bonne image svg (la couleur de fond provient du graphique lui-même) 

legend: {
  align: 'right',
  verticalAlign: 'top',
  layout: 'vertical',
  x: -50,
  y: 120,
  symbolPadding: 0,
  symbolWidth: 0.1,
  symbolHeight: 0.1,
  symbolRadius: 0,
  useHTML: true,
  symbolWidth: 0,
  labelFormatter: function() {
    if(this.name=="Microsoft Internet Explorer"){
         return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_508736.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>';
    }
   if(this.name=="Chrome"){
   return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_159842.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>';
   }
   if(this.name=="Firefox"){
   return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_261106.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>';
   }

  },
  itemStyle: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: '19px'
  }
},

Fiddle demo

5
Deep 3015

Vous pouvez modifier la légende. Pour afficher des icônes personnalisées à la place des symboles de légende, vous devez définir legend.useHTML avec une valeur vraie, masquer le symbole avec:

.highcharts-legend-item rect {
  visibility: hidden;
}

et utilisez labelFormatter. Jetez un coup d'œil à l'exemple ci-dessous.

Référence de l'API:
http://api.highcharts.com/highcharts/legend

Exemple:
http://jsfiddle.net/2trc1gv9/

0
pawel_d