将自定义符号设置为HighCharts图例

Set custom symbol to HighCharts legend

本文关键字：HighCharts 图例 设置 自定义 符号      更新时间：2023-09-26

我想设置自定义符号为图例项。现在我有一个矩形。我需要矩形与tick(如彩色复选框)。根据文档，我可以自定义元素，如文本附近的符号。

但是如果我把所有元素都做成自定义图像(示例)，那么图例符号将会改变。

我可以自定义图例符号而不自定义情节上的点吗?

series:[
     {
            name: 'Image symbol',
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }
]

可以使用图例。用于添加图例符号的labelFormatter。例如，您可以为图例使用useHTML: true，然后将图像作为符号添加到图例项中:

legend: {
  useHTML: true,
  symbolWidth: 0,
  labelFormatter: function() {
    var name = this.name;
    var img = '<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Check_Box_Noun_project_10759.svg/2000px-Check_Box_Noun_project_10759.svg.png" width = "10px" height = "10px">';
    return img + '  ' + name;
  }
},

在这里你可以找到一个例子，它是如何工作的:http://jsfiddle.net/ryd061r0/

你也可以像Barbara Laird建议的那样包装drawLegendSymbol方法。

相关文章：