highcharts 网络图表上的自定义悬停/工具提示数据

问题描述

我正在尝试在 react highcharts 网络图表上显示自定义工具提示，其中包含节点 id 以及我提供给它的 JSON 数据中的 title 和 other 字段.但是，我无法使用 API 中指定的格式化函数使其工作。

我的简化代码如下：

import React,{ useState,useEffect,useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

import networkgraph from "highcharts/modules/networkgraph";
networkgraph(Highcharts);

const NetworkChart = () => {

    const chartComponent = useRef(null); // reference to chart obj 
    const [nodeData,setNodeData] = useState([
        { 'id': 'A',title:'ABC',other:'X',dataLabels: { enabled: true },marker: { radius: 11,fillColor: 'red' } },{ 'id': 'P',title:'CDE',other:'Y',dataLabels: { enabled: true } },{ 'id': 'K',title:'EDF',{ 'id': 'S',title:'DFG',other:'Z',{ 'id': 'D',title:'SDF',]);

    const [linkData,setLinkData] = useState([
        { 'from': 'D','to': 'A' },{ 'from': 'S',{ 'from': 'K',{ 'from': 'P','to': 'A' }
    ]);


    const [chartOptions,setChartOptions] = useState({
        chart: {
            type: 'networkgraph',plotBorderWidth: 1,},title: {
            text: 'Phrasal verbs'
        },subtitle: {
            text: 'Integration: ' + 'euler'
        },credits: false,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,}]
    });

    
    return (
        <div>
            <HighchartsReact
                highcharts={Highcharts}
                options={chartOptions}
                containerProps={{ style: { height: 700 } }}
                allowChartUpdate = {true}
                ref={chartComponent}
            />
        </div>
    )
};

export default NetworkChart;

目前我看到的只是悬停时的节点 id。当我将鼠标悬停在图表中的每个节点上时，我想看到的是节点 id、title 和 other 字段值。

解决方法

您可以通过以下方式获得所需的属性：this.point.options

    tooltip: {
        formatter: function() {
            const { title,other } = this.point.options;

            return 'Title: ' + title + ' Other: ' + other
        }
    }

现场演示： http://jsfiddle.net/BlackLabel/4zgrnqc2/

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

highcharts highcharts react-highcharts