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

Question

我正在尝试在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', other:'X', dataLabels: { enabled: true } },
{ 'id': 'S', title:'DFG', other:'Z', dataLabels: { enabled: true } },
{ 'id': 'D', title:'SDF', other:'Y', dataLabels: { enabled: true } },
]);
const [linkData, setLinkData] = useState([
{ 'from': 'D', 'to': 'A' },
{ 'from': 'S', 'to': 'A' },
{ 'from': 'K', 'to': 'A' },
{ '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字段值。

Answer 1

您可以通过：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