highcharts - Highcharts 自定义图例

Question

如何自定义图例

从



对此

Answer 1

查看 Highcharts legend api 选项。您可以使用所需的 css 进一步自定义。使用适当的 svg 图像(背景颜色取自图表本身)

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演示