Question

我想更改highchart图例的图标/项目符号，是否可以自定义此内容？

感谢您的帮助。

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

Answer 1

你使用symbolRadius做它使它成为正方形

legend: {
        symbolRadius: 0
    },

Fiddle

注意如果您需要更多自定义，即想要图像，请检查此Highcarts custom legend 和Change size of legend symbol

Answer 2

您可以使用CSS隐藏图例标记：

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

然后在图例中设置useHTML并使用labelFormatter插入您自己的HTML：

  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
    }
  }

为了使图例看起来更好，请将所有项目向左移动一点：

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

现场演示： http://jsfiddle.net/kkulig/k6k9L31k/

API参考：

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

Answer 3

希望您能在下次创建问题之前阅读有关高图API的更多信息并进行更多研究。

这是文件

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

===这是解决方案===

简单方法：更改制造商类型

http://jsfiddle.net/anchika/gb32bx2j/1/

使用HTML

https://codepen.io/kevintcoughlin/pen/WrKLMe

http://jsfiddle.net/raskalbass/49pre/

Code jsfiddle

Answer 4

这更好吗？

labelFormatter() {
      const hTmp = '<div style="background-color: ' + this.color + 
      ';height:10px;width:10px;display:inline-block;border-radius:50%;"></div>';
      this.legendItem.x = 0;
      return hTmp + '<div style="display: inline-block;padding-left: 10px;">' + this.name + '</div>';
  },

HighChart - 如何更改高图传奇的图标？

4 个答案: