corethink功能模塊探索開發(十八)前臺頁面插入jit前端數據可視化庫

效果圖:javascript

1.靜態文件放入View目錄中php

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

把jit的資源放入對應目錄中html

2.在html中引入jitjava

Application/Equip/View/Index/index.htmlnode

<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>

  完成了。
此處靜態文件的路徑填寫並無處理的很好。canvas

相關文章
相關標籤/搜索