Highcarts自定义图例

Question

如何自定义图例

从…

​

​

到这个

​

​

Answer 1

查看highcharts legend应用编程接口options.You可以进一步定制所需的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演示

Answer 2

您可以修改图例。要显示自定义图标而不是图例符号，需要将legend.useHTML设置为TRUE值，使用以下参数隐藏符号：

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

并使用labelFormatter。请看下面发布的示例。

接口参考：

http://api.highcharts.com/highcharts/legend

示例：

http://jsfiddle.net/2trc1gv9/