您的位置:首页 > Web前端

corethink功能模块探索开发(十八)前台页面插入jit前端数据可视化库

2016-04-14 21:08 531 查看
效果图:



1.静态文件放入View目录中

在View目录下新建Public目录,在Public目录下新建js、css目录。

把jit的资源放入对应目录中



2.在html中引入jit

Application/Equip/View/Index/index.html

<extend name="$_home_public_layout"/>
<block name="style">
<!-- CSS Files -->
<link type="text/css" href="Application/Equip/View/Public/css/base.css" rel="stylesheet" />
<link type="text/css" href="Application/Equip/View/Public/css/Treemap.css" rel="stylesheet" />
</block>

<block name="script">

<!--[if IE]><script language="javascript" type="text/javascript" src="bzunc/Application/Equip/View//Public/js/excanvas.js"></script><![endif]-->

<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="/bzunc/Application/Equip/View/Public/js/jit.js"></script>

<!-- Example File -->
<script language="javascript" type="text/javascript" src="/bzunc/Application/Equip/View/Public/js/example1.js"></script>
<script language="javascript" type="text/javascript">
$(window).load(function(){
init();
});
</script>
</block>

<block name="main">

<div id="container">

<div id="left-container">

<div class="text">
<h4>
Animated Squarified, SliceAndDice and Strip TreeMaps
</h4>

In this example a static JSON tree is loaded into a Squarified Treemap.<br /><br />
<b>Left click</b> to set a node as root for the visualization.<br /><br />
<b>Right click</b> to set the parent node as root for the visualization.<br /><br />
You can <b>choose a different tiling algorithm</b> below:

</div>

<div id="id-list">
<table>
<tr>
<td>
<label for="r-sq">Squarified </label>
</td>
<td>
<input type="radio" id="r-sq" name="layout" checked="checked" value="left" />
</td>
</tr>
<tr>
<td>
<label for="r-st">Strip </label>
</td>
<td>
<input type="radio" id="r-st" name="layout" value="top" />
</td>
<tr>
<td>
<label for="r-sd">SliceAndDice </label>
</td>
<td>
<input type="radio" id="r-sd" name="layout" value="bottom" />
</td>
</tr>
</table>
</div>

<a id="back" href="#" class="theme button white">Go to Parent</a>

<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
</div>

<div id="center-container">
<div id="infovis"></div>
</div>

<div id="right-container">

<div id="inner-details"></div>

</div>

<div id="log"></div>
</div>
</block>完成了。

此处静态文件的路径填写并没有处理的很好。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  corethink opencmf