使用vis.js创建网络图部分option参数注释说明,后续更新 var options = { nodes:{//节点配置 borderWidth: 1,//节点边框的宽度,单位为px borderWidthSelected: 2,节点被选中时边框的宽度,单位为px color:
var options = { nodes:{//节点配置 borderWidth: 1,//节点边框的宽度,单位为px borderWidthSelected: 2,节点被选中时边框的宽度,单位为px color: { border: '#2B7CE9',//节点边框颜色 background: '#97C2FC',//节点背景颜色 highlight: {//节点选中时状态颜色 border: '#2B7CE9', background: '#D2E5FF' }, font: {//字体配置 color: '#343434',//颜色 size: 14, // 大小,单位px face: 'arial',//字体 background: 'none',//背景 align: 'center',//位置left right center }, hover: {//节点鼠标滑过时状态颜色 border: '#2B7CE9', background: '#D2E5FF' } }, shadow:true }, interaction: { dragNodes:false,//是否能拖动节点 dragView:false,//是否能拖动画布 hideEdgesOnDrag:true,//拖动画布时是否隐藏连接线 hideNodesOnDrag:true,//拖动画布时是否隐藏节点 hover: true,//鼠标移过后加粗该节点和连接线 keyboard:true,// multiselect:true,//按 ctrl 多选 navigationButtons:true,//是否显示控制按钮 selectable:false,//是否可以点击选择 selectConnectedEdges:false,//选择节点后是否显示连接线 hoverConnectedEdges:false,//鼠标滑动节点后是否显示连接线 tooltipDelay:200, zoomView:true }, layout:{ randomSeed:1,//配置每次生成的节点位置都一样,参数为数字1、2等 hierarchical: { direction: 'UD',//UD:上下 DU:下上 LR:左右 RL:右左 sortMethod: 'directed' }, //层级结构显示} }, edges: { shadow:true,//连接线阴影配置 smooth: true,//是否显示方向箭头 arrows: {from : true }//箭头指向from节点 } };