HighChart - 如何更改高图例的图标？ [英] HighChart - How to change the icons of the highchart legend?

问题描述

感谢您的帮助。

$ b $

我想更改highchart传说的图标/项目符号， b

http://jsfiddle.net/9oz9h3pb/1/

  //来自HighCharts页面的图形示例：
 //http://jsfiddle.net/9oz9h3pb / 1 / 
  

解决方案

  .highcharts-legend-item .highcharts-point，
 .highcharts-legend-item .highcharts-graph { 
 display：none 
} 
  

然后设置 useHTML 并插入您自己的HTML，使用 labelFormatter ：

  legend：{
 useHTML：true，
 labelFormatter：function（）{
 return< img src ='https：//pbs.twimg.com/profile_images/538262176134221824 /Vx4_Psj1_400x400.png'width = '20'高t ='20'>+ this.name 
} 
} 
  

为了让图例看起来更好，将所有项目移动到左侧：

  this.legend.allItems.forEach（function （item）{
 item.legendItem.attr（{
x：item.legendItem.x  -  10 
}）; 
}）; 
  

现场演示： http://jsfiddle.net/kkulig/k6k9L31k/
$ b API参考：

http： http ：//api.highcharts.com/highcharts/legend.labelFormatter

I want to change the icons/bullets of the highchart legend, Is it possible to customize this?

Thanks for your help.

http://jsfiddle.net/9oz9h3pb/1/

//An example of a graphic from the HighCharts page:
//http://jsfiddle.net/9oz9h3pb/1/

解决方案

You can hide legend markers using CSS:

.highcharts-legend-item .highcharts-point,
.highcharts-legend-item .highcharts-graph {
  display: none
}

Then set useHTML in legend and insert your own HTML using labelFormatter:

  legend: {
    useHTML: true,
    labelFormatter: function() {
      return "<img src='https://pbs.twimg.com/profile_images/538262176134221824/Vx4_Psj1_400x400.png' width='20' height='20'> " + this.name
    }
  }

To make the legend look better move all items a little bit to the left:

this.legend.allItems.forEach(function(item) {
  item.legendItem.attr({
    x: item.legendItem.x - 10
  });
});

Live demo: http://jsfiddle.net/kkulig/k6k9L31k/

API references:

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

这篇关于HighChart - 如何更改高图例的图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！