使用tagcanvas实现热点分布

下面链接是使用tagvanvas的官方文档。

http://www.goat1000.com/tagcanvas.php

实现效果非常的绚丽，功能非常强悍。

本人按照官网提供的资料基本上大部分都已经实现，其中tooltip工具提示，首先自己没能实现，找了半天资料，终于发现了事项方法，先提供出来：

http://www.goat1000.com/2012/03/08/tagcanvas-1.14.html

上面链接是官网提供的方法：本人也是按照上面的方法实现的，其中只需要在相应元素中添加title元素，然后在opt选项中添加tooltip: 'div',最后在引入样式，其中这个开源的工具默认使用的是.tctooltip样式，我们只需要编写.tctooltip类样式就好。

代码如下：

样式：

.tctooltip {
     border: 1px solid #000;
     background-color: #fc6;
     color: #000;
     padding: 4px;
     font-size: 80%;
     max-width: 150px;
     text-align: center;
     border-radius: 3px
}

 

脚本：

<script type="text/javascript" src="${ctxPath}/js/tagCanvas/tagcanvas.js"></script>
<script type="text/javascript" src="${ctxPath}/js/tagCanvas/tagcanvas.min.js"></script>

var myOption = {
   textColour: '#ff0000',
         outlineColour: '#ff00ff',
         textHeight:30,
         reverse: true,
         depth: 0.8,
         maxSpeed: 0.05,
         minSpeed:0.01,
         dragControl:true,
         initial:[0.05,-0.08],
         weight:true,
         weightMode:"both",
         weightSize:1.0,
         weightGradient:{0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'},
         tooltip: 'div',

 };

 

 

try {
          TagCanvas.Start('myCanvas','tags',myOption);
 } catch(e) {
          document.getElementById('myCanvasContainer').style.display = 'none';
 }

 

 

jsp页面元素：

<div id="hot-point" >
    <div id="myCanvasContainer">
         <canvas width="480" height="350" id="myCanvas"></canvas>
       </div>
       <div id="tags" style="display:none">
         <ul id="tagtopli">
           <li><a href="#" οnclick="return false" title="Google">Google</a></li>
           <li><a href="#" οnclick="return false" title="Fish">Fish</a></li>
           <li><a href="#" οnclick="return false" title="Fish">Chips</a></li>
           <li><a href="#" οnclick="return false" title="Fish">Salt</a></li>
           <li><a href="#" οnclick="return false" title="Fish">Vinegar</a></li>
         </ul>
       </div>
   </div>

 

 

 

 

作为知识储备，先记录下来，以备后用。