在Highmaps中将图像添加到工具提示

Question

如何在Highmaps中的工具提示中显示图像（小图标）？我知道之前已经问过这个问题 - here - 但是如果我可以让它发挥作用该死的。我甚至怀疑它是否可行，因为据我所知，在他们的API文档中，Highmaps对HTML的支持是有限的，例如here并且不包含img标签。

我用一些示例图标创建了一个jsfiddle here。如果有人可以演示如何将这些添加到工具提示中（当然，每个工具提示一个），我将不胜感激

$('#container').highcharts('Map', {
        title: {
           "text": "Simple Map"
        },
        series: [
            {
              "name": "Colours",
                "type": "map",
                "tooltip": {
                   "headerFormat": "",
                   "pointFormat": "{point.name}"
                },
                "data": [
                    {
                        "name": "Blue<br>violets",
                        "path": "M0,-994L204,-994L203,-480,0,-477z"
                    },
                    {
                        "name": "Yellow<br>is the colour of...",
                        "path": "M204,-994L455,-994L457,-477,203,-480z"
                    },
                    {
                        "name": "Red<br>sky at night",
                        "path": "M455,-994,697,-991,700,-481,457,-477z"
                    },
                    {
                        "name": "Green<br>grass",
                        "path": "M697,-991,998,-992,1000,-480,700,-481z"
                    }
                ]   
            }
        ]
     });

Answer 1

您需要启用useHTML参数并将显示的图片与点链接，例如：

series: [{
    ...,
    "data": [{
            ...,
            tooltipImg: 'left'
        },
        {
            ...,
            tooltipImg: 'right'
        },
        ...
    ]
}],
tooltip: {
    useHTML: true,
    formatter: function() {
        return this.point.name +
        '<br><img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-' +
        this.point.tooltipImg + '-icon.png" width="32" height="32">'
    }
}

现场演示：https://jsfiddle.net/BlackLabel/9bujq56y/

API参考：https://api.highcharts.com/highmaps/tooltip.useHTML