请求协助：如何在指定Highcharts示例的Tooltip中添加额外信息

没问题，我帮你搞定这两个Highcharts tooltip添加额外信息的需求，核心是利用Highcharts的tooltip.formatter自定义函数，结合给数据点添加自定义字段来实现。下面分两种场景给你具体代码示例：

步骤说明： #

• 先给折线图的每个数据点添加自定义额外字段（比如extraInfo）
• 配置tooltip.formatter函数，把默认内容和额外信息拼接后返回

Highcharts.chart('container', {
    title: {
        text: 'Monthly Average Temperature'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    tooltip: {
        // 自定义Tooltip内容
        formatter: function() {
            // 基础内容：系列名称 + X轴月份 + Y轴温度
            let baseContent = `<b>${this.series.name}</b><br/>${this.x}: ${this.y}°C`;
            // 如果当前数据点有额外信息，追加到内容末尾
            if (this.point.extraInfo) {
                baseContent += `<br/><i>备注：${this.point.extraInfo}</i>`;
            }
            return baseContent;
        }
    },
    series: [{
        name: 'Tokyo',
        // 把原有的纯数值数组改成对象数组，添加自定义字段
        data: [
            {y: 7.0, extraInfo: '1月东京气温偏低，偶有降雪'},
            {y: 6.9, extraInfo: '2月气温小幅回升'},
            {y: 9.5, extraInfo: '3月进入春季，气温明显上升'},
            {y: 14.5, extraInfo: '4月舒适宜人'},
            {y: 18.2, extraInfo: '5月开始入夏'},
            {y: 21.5, extraInfo: '6月梅雨季节'},
            {y: 25.2, extraInfo: '7月盛夏高温'},
            {y: 26.5, extraInfo: '8月全年最热'},
            {y: 23.3, extraInfo: '9月秋老虎仍在'},
            {y: 18.3, extraInfo: '10月气温骤降'},
            {y: 13.9, extraInfo: '11月进入深秋'},
            {y: 9.6, extraInfo: '12月冬季来临'}
        ]
    }, {
        name: 'New York',
        data: [
            {y: -0.2, extraInfo: '1月纽约严寒'},
            {y: 0.8, extraInfo: '2月略有回暖'},
            {y: 5.7, extraInfo: '3月冰雪开始融化'},
            // 其他数据点同理添加自定义字段
            11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5
        ]
    }]
});

步骤说明： #

• 主饼图和下钻后的子饼图数据，都可以添加自定义字段（比如description）
• 同样通过tooltip.formatter函数统一处理，不管是主饼图还是下钻后的子图，只要数据点有自定义字段就渲染出来

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Browser market shares in January, 2018'
    },
    tooltip: {
        formatter: function() {
            // 基础内容：点名称 + 占比
            let content = `<b>${this.point.name}</b><br/>市场占比: ${this.y}%`;
            // 检查当前数据点是否有自定义说明字段，有则追加
            if (this.point.description) {
                content += `<br/><i>说明：${this.point.description}</i>`;
            }
            return content;
        }
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}: {point.y:.1f}%'
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        // 主饼图数据添加自定义description字段
        data: [{
            name: 'Microsoft Internet Explorer',
            y: 56.33,
            description: '传统桌面浏览器，市场份额逐年下滑',
            drilldown: 'Microsoft Internet Explorer'
        }, {
            name: 'Chrome',
            y: 24.03,
            description: 'Google旗下主流浏览器，市场占比第一',
            drilldown: 'Chrome'
        }, {
            name: 'Firefox',
            y: 10.38,
            description: '开源老牌浏览器',
            drilldown: 'Firefox'
        }, {
            name: 'Safari',
            y: 4.77,
            description: '苹果生态专属浏览器',
            drilldown: 'Safari'
        }, {
            name: 'Opera',
            y: 0.91,
            description: '小众特色浏览器',
            drilldown: 'Opera'
        }, {
            name: 'Other',
            y: 0.2,
            description: '其他小众浏览器总和',
            drilldown: null
        }]
    }],
    drilldown: {
        // 下钻子图的数据同样添加自定义description字段
        series: [{
            name: 'Microsoft Internet Explorer',
            id: 'Microsoft Internet Explorer',
            data: [
                {name: 'v11.0', y: 24.13, description: 'IE最后一个官方支持版本'},
                {name: 'v8.0', y: 17.2, description: '经典旧版本，仍有企业用户'},
                {name: 'v9.0', y: 8.11, description: '过渡版本'},
                {name: 'v10.0', y: 5.33, description: '改进版'},
                {name: 'v6.0', y: 1.06, description: '超老旧版本'}
            ]
        }, {
            name: 'Chrome',
            id: 'Chrome',
            data: [
                {name: 'v65.0', y: 13.8, description: '稳定版'},
                {name: 'v64.0', y: 3.6, description: '上一稳定版'},
                {name: 'v63.0', y: 1.5, description: '旧版本'}
            ]
        },
        // 其他下钻系列同理添加自定义字段
        {
            name: 'Firefox',
            id: 'Firefox',
            data: [
                {name: 'v58.0', y: 6.65, description: '稳定版'},
                {name: 'v57.0', y: 1.47, description: '量子引擎版本'}
            ]
        }, {
            name: 'Safari',
            id: 'Safari',
            data: [
                {name: 'v11.0', y: 3.39, description: '苹果最新桌面版'},
                {name: 'v10.1', y: 0.96, description: '旧版本'}
            ]
        }, {
            name: 'Opera',
            id: 'Opera',
            data: [
                {name: 'v50.0', y: 0.91, description: '最新稳定版'}
            ]
        }]
    }
});

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