高级定制图例 [英] Highcarts custom legend

问题描述

如何自定义图例

从

至此

解决方案

check highcharts 传奇 api选项你可以进一步自定义所需的CSS。使用适当的svg图像（背景颜色是从图表本身取得的）

 图例：{
 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.svgwidth =40pxheight =40pxstyle =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.svgwidth =40pxheight =40pxstyle =background-color：'+ this .color +';>< / span>< span style =float：right; padding：9px>'+ this.percentage.toFixed（2）++ this.y +'％< ; /跨度>< / 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.svgwidth =40pxheight =40pxstyle =background-color：'+ this .color +';>< / span>< span style =float：right; padding：9px>'+ this.percentage.toFixed（2）++ this.y +'％< ; /跨度>< / DIV>'; 
 
 
 $ b itemStyle {
 color：'#ffffff'，
 fontWeight：'bold'，
 fontSize：' 19px'
} 
}，
  

小提琴演示

How can I customize the legends

From

To this

解决方案

check highcharts legend api options.You can further customize with desired css. use proper svg image (background color is taken from chart itself)

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

这篇关于高级定制图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！