Question

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

截至目前，我正在使用以下选项绘制图形并显示工具提示。当我将鼠标悬停在任何一点上时，此工具提示将显示相同的信息。我需要为每个点显示不同的数据。我该怎么办？

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;
    }
}

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

1 个答案: