React Highcharts网络图自定义tooltip显示id、title、other字段问题

你只需要在chartOptions配置中新增tooltip的自定义格式化逻辑即可，具体修改如下：

步骤1：添加tooltip配置 #

在chartOptions对象的根层级加入tooltip配置项，注意formatter不要使用箭头函数，避免丢失Highcharts绑定的当前节点上下文：

const [chartOptions, setChartOptions] = useState({
    chart: {
        type: 'networkgraph',
        plotBorderWidth: 1,
    },
    title: {
        text: 'Phrasal verbs'
    },
    subtitle: {
        text: 'Integration: ' + 'euler'
    },
    credits: false,
    // 新增的tooltip配置
    tooltip: {
        // 允许解析自定义HTML内容，方便后续扩展样式
        useHTML: true,
        formatter: function () {
            // 区分当前悬浮的是节点还是连线
            if (this.point.isNode) {
                // 节点悬浮展示指定的三个字段
                return `
                    <p>* 节点ID：${this.point.id}</p>
                    <p>* 标题：${this.point.title}</p>
                    <p>* 其他：${this.point.other}</p>
                `
            }
            // 连线悬浮可自定义展示内容，不需要也可以返回空字符串隐藏
            return `<p>连线：${this.point.from} → ${this.point.to}</p>`
        }
    },
    plotOptions: {
        // 原有plotOptions配置保持不变
        networkgraph: {
            layoutAlgorithm: {
                enableSimulation: false,
                integration: 'euler',
                linkLength: 25,
            },
            keys: ['from', 'to'],
            marker: {
                radius: 5,
                lineWidth: 1
            }
        },
        series: {
            point: {
                events: {
                    click: function () {
                        // click function
                        },
                }
            }
        }
    },
    series: [{
        allowPointSelect: true,
        nodes: nodeData,
        data: linkData,
    }]
});

额外说明 #

如果你的项目中存在多种图表类型，也可以把tooltip配置放在plotOptions.networkgraph下，仅对当前网络图生效，避免影响其他图表的tooltip表现。

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