Question

如何在Highmaps的工具提示中显示图像（小图标）？我知道之前曾有人问过这个问题-here-但是该死，如果我能使它起作用。我什至不知道是否可能，因为据我在他们的API文档中所见，对HTML的Highmaps支持是有限的，例如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

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

1 个答案: