在Angular中显示highcharts网络图的每个点的工具提示

Question

我正在我的 Angular 应用程序上使用 highcharts 和 highcharts-angular 构建网络图。我能够成功显示带有数据标签的图表。现在，当我将鼠标悬停在图表的每个点/节点上时，我必须显示一些工具提示数据。我该怎么做？如何显示与图表的每个点对应的工具提示？

到目前为止，我正在使用以下选项来绘制图表并显示工具提示。当我悬停任何点时，此工具提示会显示相同的信息。我需要为每个点显示不同的数据。我该怎么做？

chartOptions = {
"chart": {
    "type": "networkgraph",
    "height": "100%"      
},
"title": {
    "text": "Network graph demo"
},
"subtitle": {
    "text": "A Force-Directed Network Graph in Highcharts"
},
"plotOptions": {
    "networkgraph": {
    "keys": ["from", "to"],
    "layoutAlgorithm": {
        "enableSimulation":true
    }
    }

},
"series": [
    {
    "dataLabels": {
        "enabled": true,            
        "linkFormat": ""          
    },
    "data": [{"from" : "a", "to": "b"},
            {"from": "a", "to": "c"},
            {"from": "a", "to": "d"} ],
    "marker" : {"radius" : 18}
    }

],
"tooltip" :
{
    "enabled" : true, 
    "formatter" : function() {
    return "<div> <span> My tooltip information </span> </div>"
    }
}
}

Answer 1

我使用 console.log() 探索 Highcharts API 中可用的对象

您将在控制台输出中看到所有可访问的信息，其中name 似乎是您所追求的？

试试这个：

"tooltip" :
{
    "enabled" : true, 
    "formatter" : function() {
        console.log(this.point)
      return this.point.name
    }
}

下面的更新，这是否接近你所追求的？

"tooltip" :
{
    "enabled" : true, 
    "useHTML" : true, 
    "formatter" : function() {
      let linkFrom_li = '';
      let linkTo_li   = '';
      let tooltipHTML   = '';
      for (let i = 0; i < this.point.linksTo.length; i++) {
          linkFrom_li = linkFrom_li + `<li>${this.point.linksTo[i].from}</li>`;
      }
      for (let i = 0; i < this.point.linksFrom.length; i++) {
          linkTo_li   = linkTo_li + `<li>${this.point.linksFrom[i].to}</li>`;
      }
      tooltipHTML = tooltipHTML + `<b>Links from [${this.point.name}]</b>:<ul>${linkFrom_li}</ul>`;
      tooltipHTML = tooltipHTML + `<b>Links to [${this.point.name}]</b>:<ul>${linkTo_li}</ul>`;
      return tooltipHTML;
    }
}