javascript - highchart网络网络图
问题描述
我正在使用 highchart 创建网络图。我需要更改工具提示值。但它不工作。
请检查我的代码
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>
当我将鼠标悬停在网络葡萄节点上时,我需要显示代码值。我是怎么做的。
解决方案
尝试这个:
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>
推荐阅读
- c++ - 无法从 decltype 中获取指向成员函数的指针
- android - 有线问题,RecyclerView 在某些特定的三星 Galaxy 设备上不显示项目
- matlab - 从 MATLAB 中的 2D 地图绘制体积 3D 数据?
- python - 使用 Regex 从“1. hello”中获取“hello”
- angular - 如果响应为空,我如何调用函数
- javascript - 尝试使用递归解决而不使用其他算法
- python - 如何在从 .csv 文件创建的列表中查找单词的频率
- python - 我无法弄清楚这个主要检查器有什么问题
- css - CSS边距编辑弄乱了移动网站
- php - 使用 PHP 上传图像并在单独的页面上显示