[JSMind]使用JSMind操作生成的思维导图

最新推荐文章于 2024-05-28 14:55:46 发布

暮念朝兮

最新推荐文章于 2024-05-28 14:55:46 发布

阅读量4.7k

点赞数 1

分类专栏： JavaScript 文章标签： js JSMind

本文链接：https://blog.csdn.net/weixin_43303530/article/details/108273344

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用JSMind创建思维导图的JS代码，但是浏览器执行起来可能较慢，所以后面此代码还是改到后端了，但毕竟是一部分时间的努力成果，留个纪念

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	.countday {
		border: 1px solid yellow;
		color: yellow
	}
	.span-black {
		color: black
	}
	.span-green {
		color: green
	}
	.span-red {
		color: red
	}
	.root{
		padding: 9px 12px;
	}
</style>
</head>
<body>
	<div id="jsmind_container" style="width: 1100px; height: 800px"></div>
</body>
<script>
$(document).ready(function(){
	$("#inputtext").hide();
	var mind = {
		"meta": {
			"name": "龙虎榜",
			"author": "liurui",
			"version": "1"
		},
		"format": "node_tree",
		"data": {
			"id": "root",
			"expanded": true
			/* "topic": "<span class='span-root'>龙虎榜</sapn>", 
			"font-size": 26,
			"background-color": "rgb(16,1,1)" */
		}
    }
	var options = {
	    container:'jsmind_container',//容器的ID
	    editable:true,				// 是否启用编辑
	    theme:'primary'	,			//主题
	    view:{
	        engine: 'canvas',   // 思维导图各节点之间线条的绘制引擎
	        hmargin:100,        // 思维导图距容器外框的最小水平距离
	        vmargin:50,         // 思维导图距容器外框的最小垂直距离
	        line_width:1,       // 思维导图线条的粗细
	        line_color:'#555'   // 思维导图线条的颜色
	    },
	    layout:{
	        hspace:30,          // 节点之间的水平间距
	        vspace:8,          // 节点之间的垂直间距
	        pspace:13           // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
	    },
	    shortcut:{
	        enable:false        // 是否启用快捷键
	    }
	}
	var jm = new jsMind(options);
	jm.show(mind);
	jm.set_node_background_image("root","images/img/lhb.png",78,29);
	$(".root").css("background-size","100%");
	// if(jm.get_root().children.length==0){
		// var html = "<table class='table_list' border='0' cellspacing='1' cellpadding='0'><tr><td>";
		// html += "<div style='clear: both; min-height: 100px;' id='main'><div style='height: 10px;'></div><div class='nullcontent_div'>没有查询到相关信息！</div>";
		// html += "</tr></td></table>";
		// $("#jsmind_container").html(html);
	// }
	var data = eval('${data}');
	$.each(data,function(i, list) {
		var ls = eval(list);
		var nodeid = jsMind.util.uuid.newid();
		var topic = ls[0].yzname;
		var parent_node = jm.get_root();
		var node = jm.add_node(parent_node, nodeid, topic);
		jm.set_node_color(nodeid,'#0872c6',null);
		jm.set_node_font_style(nodeid, 11);
		jm.get_node(nodeid).direction = ls[0].fx;
		$.each(ls,function(j, obj) {
			var ls2 = eval(obj);
			var nodeid2 = jsMind.util.uuid.newid();
			ls2.sbuy = ls2.sbuy + "";
			if(ls2.sbuy<0){
				if(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')).length>5){
					ls2.sbuy = (parseInt(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')))/10000).toString().substring(0,(parseInt(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')))/10000).toString().indexOf('.')+3);
					if(ls2.a=='3'){
						var topic2 = "<span class='countday'><strong>3日</strong></span>&nbsp;"+ls2.secuabbr+ls2.sbuy+"亿";
					}else{
						var topic2 = ls2.secuabbr+ls2.sbuy+"亿";
					}
				}else{
					if(ls2.a=='3'){
						var topic2 = "<span class='countday'><strong>3日</strong></span>&nbsp;"+ls2.secuabbr+ls2.sbuy+"万";
					}else{
						var topic2 = ls2.secuabbr+ls2.sbuy+"万";
					}
				}
			}else{
				if(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')).length>4){
					ls2.sbuy = (parseInt(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')))/10000).toString().substring(0,(parseInt(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')))/10000).toString().indexOf('.')+3);
					if(ls2.a=='3'){
						var topic2 = "<span class='countday'><strong>3日</strong></span>&nbsp;"+ls2.secuabbr+ls2.sbuy+"亿";
					}else{
						var topic2 = ls2.secuabbr+ls2.sbuy+"亿";
					}
				}else{
					if(ls2.a=='3'){
						var topic2 = "<span class='countday'><strong>3日</strong></span>&nbsp;"+ls2.secuabbr+ls2.sbuy+"万";
					}else{
						var topic2 = ls2.secuabbr+"+"+ls2.sbuy+"万";
					}
				}
			}
			var node2 = jm.add_node(node, nodeid2, topic2);
			if(ls2.sbuy<0){
				jm.set_node_color(nodeid2,'#2fb33b',null);
			}else{
				//jm.set_node_color(nodeid2,'#a82829',null);
				jm.set_node_color(nodeid2,'red',null);
			}
			jm.set_node_font_style(nodeid2, 11);
			var nodeid3 = jsMind.util.uuid.newid();
			ls2.dbuy = ls2.dbuy + "";
			if(ls2.dbuy<0){
				if(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')).length>5){
					ls2.dbuy = (parseInt(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')))/10000).toString().substring(0,(parseInt(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')))/10000).toString().indexOf('.')+3);
					var topic3 = "<span class='span-black'>"+ls2.deptname+"&nbsp;<span class='span-green'>"+ls2.dbuy+"亿</span>"+"<span>";
				}else{
					var topic3 = "<span class='span-black'>"+ls2.deptname+"&nbsp;<span class='span-green'>"+ls2.dbuy+"万</span>"+"<span>";
				}
			}else{
				if(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')).length>4){
					ls2.dbuy = (parseInt(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')))/10000).toString().substring(0,(parseInt(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')))/10000).toString().indexOf('.')+3);
					var topic3 = "<span class='span-black'>"+ls2.deptname+"&nbsp;+<span class='span-red'>"+ls2.dbuy+"亿</span>"+"<span>";
				}else{
					var topic3 = "<span class='span-black'>"+ls2.deptname+"&nbsp;+<span class='span-red'>"+ls2.dbuy+"万</span>"+"<span>";
				}
			}
			var node3 = jm.add_node(node2, nodeid3, topic3);
			jm.set_node_font_style(nodeid3, 10);
			jm.set_node_color(nodeid3,'#f0f5f9',null);
		});
	});
	jm.disable_edit();  //禁止编辑
	});
</script>
</html>

暮念朝兮

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
[JSMind]使用JSMind操作生成的思维导图

var data = eval('${data}');$.each(data,function(i, list) { var ls = eval(list); var nodeid = jsMind.util.uuid.newid(); var topic = ls[0].yzname; var parent_node = jm.get_root(); var node = jm.add_node(parent_node, nodeid, topic); jm.set_node_color(n
复制链接

扫一扫