高图网络网络图 [英] highchart network network-graph
本文介绍了高图网络网络图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用highchart创建网络图.我需要更改工具提示值.但它不起作用.
I am using highchart to create network-graph. i need to change tooltip value. but its not working.
请检查我的代码
var json = [{
"key": "1",
"value": "19122",
"code": "A"
}, {
"key": "19122",
"value": "623753",
"code": "B"
}, {
"key": "19122",
"value": "582024",
"code": "C"
}],
data = [];
json.forEach(function(point) {
data.push([point.key, point.value])
});
Highcharts.chart('container', {
tooltip: {
formatter: function() {
return data.code;
}
},
series: [{
type: 'networkgraph',
layoutAlgorithm: {
enableSimulation: true
},
dataLabels: {
enabled: true,
linkFormat: ''
},
data
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>
当我将鼠标悬停在网络葡萄节点上时,我需要显示代码值.我该怎么做.
when i mouse over the network grape node, i need to show code value. how i do it.
推荐答案
尝试一下:
var json = [{
"key": "1",
"value": "19122",
"code": "A"
}, {
"key": "19122",
"value": "623753",
"code": "B"
}, {
"key": "19122",
"value": "582024",
"code": "C"
}],
data = [];
json.forEach(function(point) {
data.push([point.key, point.value])
});
Highcharts.chart('container', {
tooltip: {
formatter: function() {
const codes = json.reduce((acc, cur)=>{
if(cur.key===this.key||cur.value===this.key) acc.push(cur.code);
return acc;}, []);
return codes.join(',');
}
},
series: [{
type: 'networkgraph',
layoutAlgorithm: {
enableSimulation: true
},
dataLabels: {
enabled: true,
linkFormat: ''
},
data
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>
这篇关于高图网络网络图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文