悬停在每个节点上时带有工具提示的 Highchart 网络图
Highchart network graph with tooltip when hover on every node
我正在为我的 Angular 项目之一使用 highcharts 创建网络图。我想在鼠标移动到 point/node 时创建工具提示。我尝试使用以下图表选项创建。但是,我收到错误。如何为网络图点创建工具提示?
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)
工具提示似乎有误。 (额外的大括号)
试试这个代码:
tooltip :
{
enabled : true,
formatter : function() {
return "<div> <span> My tooltip information </span> </div>"
}
}
我认为问题可能出在 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 是图标
我正在为我的 Angular 项目之一使用 highcharts 创建网络图。我想在鼠标移动到 point/node 时创建工具提示。我尝试使用以下图表选项创建。但是,我收到错误。如何为网络图点创建工具提示?
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)
工具提示似乎有误。 (额外的大括号)
试试这个代码:
tooltip :
{
enabled : true,
formatter : function() {
return "<div> <span> My tooltip information </span> </div>"
}
}
我认为问题可能出在 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 是图标