悬停在每个节点上时带有工具提示的 Highchart 网络图答案

【问题标题】：Highchart network graph with tooltip when hover on every node悬停在每个节点上时带有工具提示的 Highchart 网络图
【发布时间】：2019-05-05 18:59:36
【问题描述】：

我正在为我的一个 Angular 项目使用 highcharts 创建网络图。我想在鼠标移动到点/节点时创建工具提示。我尝试使用以下图表选项创建。但是，我遇到了错误。如何为网络图点创建工具提示？

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

错误：

 ERROR TypeError: w.call is not a function
at a.Tooltip.refresh (highcharts.js:205)
at a.Pointer.runPointActions (highcharts.js:220)
at q.onMouseOver (highcharts.js:446)
at SVGGElement.d [as __zone_symbol__ON_PROPERTYmouseover] (highcharts.js:435)
at SVGGElement.wrapFn (zone.js:1332)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)

【问题讨论】：

标签： javascript highcharts highcharts-ng angular2-highcharts

【解决方案1】：

工具提示似乎错误。（额外的花括号）

试试这个代码：

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

【讨论】：

是的，那是我的错。删除多余的花括号解决了我的问题。

【解决方案2】：

我认为问题可能出在chartOptions。

首先，我为键和值实现了引号，并将单引号替换为双引号。

其次，我认为它期待一个函数，而不是 formatter 的对象；因此，由此：

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

我改成：

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

这是整个清理过程：

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

试试看，如果继续这样做，请告诉我。

如果你能把它放到 Stack overflow 提供的 Snipped 中，尝试和帮助会更容易。 Snipped 是图标是

【讨论】：

引号不是问题。是的，它具有格式化程序功能。谢谢，解决了。