Highmaps提示框入门：自定义显示问题求助

针对你遇到的这两个Highcharts地图显示问题，我整理了直接可用的修改方案，调整你的代码就能生效：

问题1：无value字段时Tooltip默认显示0，改为无内容显示 #

Highcharts会给未定义value的点默认赋值0，导致Tooltip自动渲染这个默认值。我们可以通过自定义tooltip.formatter函数来判断，只有当value存在时才显示数值部分：

$(function () { 
    $('#container').highcharts('Map', {
        title: { text: "Simple Map" },
        tooltip: {
            formatter: function() {
                // 先渲染点的名称
                let content = `<b>${this.point.name}</b>`;
                // 仅当value存在时，添加数值行
                if (typeof this.point.value !== 'undefined') {
                    content += `<br/>Value: ${this.point.value}`;
                }
                return content;
            }
        },
        series: [
            {
                name: "07 March 2019",
                type: "map",
                data: [
                    { value: 23, name: "Blue", path: "M0,-994L204,-994L203,-480,0,-477z" },
                    { name: "Yellow<br>is the colour of...", path: "M204,-994L455,-994L457,-477,203,-480z" },
                    { name: "Red", path: "M455,-994,697,-991,700,-481,457,-477z" },
                    { name: "Green", path: "M697,-991,998,-992,1000,-480,700,-481z" }
                ]
            }
        ]
    });
})

修改后，没有value的点（比如Yellow、Red、Green）的Tooltip只会显示名称，不会再出现默认的0。

问题2：隐藏系列名称在标签上的显示，同时移除左侧图例点 #

你提到的“系列名称显示在每个标签上”是dataLabels的默认行为，而左侧的蓝点是系列的图例项。要完全隐藏这两部分，需要做两个设置：

1. 给系列添加showInLegend: false，关闭图例显示
2. 自定义dataLabels的formatter，只渲染点的名称（如果不需要标签，直接设enabled: false即可）

最终修改后的代码：

$(function () { 
    $('#container').highcharts('Map', {
        title: { text: "Simple Map" },
        tooltip: {
            formatter: function() {
                let content = `<b>${this.point.name}</b>`;
                if (typeof this.point.value !== 'undefined') {
                    content += `<br/>Value: ${this.point.value}`;
                }
                return content;
            }
        },
        plotOptions: {
            map: {
                dataLabels: {
                    enabled: true, // 不需要标签的话直接设为false
                    formatter: function() {
                        // 只返回点的名称，不包含系列名称
                        return this.point.name;
                    }
                }
            }
        },
        series: [
            {
                name: "07 March 2019",
                type: "map",
                showInLegend: false, // 隐藏左侧图例点
                data: [
                    { value: 23, name: "Blue", path: "M0,-994L204,-994L203,-480,0,-477z" },
                    { name: "Yellow<br>is the colour of...", path: "M204,-994L455,-994L457,-477,203,-480z" },
                    { name: "Red", path: "M455,-994,697,-991,700,-481,457,-477z" },
                    { name: "Green", path: "M697,-991,998,-992,1000,-480,700,-481z" }
                ]
            }
        ]
    });
})

如果连点的名称标签都不需要显示，直接把plotOptions.map.dataLabels.enabled设为false即可，这样地图上不会有任何标签，左侧的图例点也会被彻底隐藏。

内容的提问来源于stack exchange，提问作者PSU