采用 ajax + vml 制作一个柱状图报表

JiangMin — Mon, 21 May 2007 11:20:00 GMT

摘要: 备䆾一个有意思的��东西：动态柱状图,采用ajax + vml。vml是微软在IE5中就支持的矢量图技术。采用xml的格式来生成矢量图，�q��ؓ我们在页面上生成高质量的囑փ�提供了很好的支持。另�Q�虽然SVG很好�Q�但IE不支持（不安装插件的话）。程序很��单：一个servlet�Q�采集数据（仅仅随机产生一个数�l�）。一个html��面�Q�采用ajax从servlet得到数据�Q�然后用vml生成图表。由于采用了ajax�Q?.. 阅读全文

JiangMin 2007-05-21 19:20 发表评论

JiangMin — Tue, 15 May 2007 14:38:00 GMT

现在很流行用javascript脚本来制作这些东西，下面我也多写几句斚w��大家理解怎么样一步步的去制作自己惌��的东�ѝ��还有编码的思想�?/p>

当看到这些效果的时候，应该�l�合自己所知道的知识去��x��怎么样实现的�Q�当然这里实现的�Ҏ��不是唯一的。每个�h都有自己的思�\�Q�当惛_��的时候就自己��d��的编码试一下�?/p>

�q�个�p�d��文章�W�一部分�Q�首先从最��单的拖动开始说��P��有不懂的朋友可以留言�?/p>

��单的拖动DIV的主要编�E�思�\�Q?/p>

1、应该了解拖动，首先��x��坐标。也��是��_��要了解DHTML里面的坐标的属性。这里我们用的是event.clientX和event.clientY�Q�即鼠标相对于边距X的距��d��Y的距��R��如果有不明白的�Q�可以去查阅相关资料�Q�这里不再赘�q��?/p>

2、如何得到拖动对的的坐标呢？可以用offsetTop和offsetLeft来得刎ͼ�属性我也不再多��_��h��阅DHTML参考�?/p>

3、应该有大致的思�\了吧�Q�用什么事件来触发拖动的句柄呢�Q�当然可以用ondrag的事�Ӟ��但是不太可取。也不太利于以后为兼容而做的准备工作。那�q�有什么事件可以用�Q�仔�l�想惻I��拖动时会触发什么事�Ӟ��一、当鼠标�U�M��对象时。二、鼠标按下。三鼠标�U�d��。四、鼠标放开。这几个也就是那几个事�g。即对应的onmouseover、omousedown、onmousemove、onmouseup事�g�?/p>

4、如何计��坐标？我的思�\是这��L��Q�一�Q�鼠标按下时�Q�记得拖动物件的相对坐标。二、拖动时捕获对象�Q��ƈ实时得到坐标�Q�用当前的坐标减��d��始坐标，得到新的坐标�Q��ƈ把拖动物件的left和top讄��为当前的X和Y坐标。三、鼠标放开�Ӟ��释放所有的对象�?/p>

5、开始编码�?/p>

我们按照上面的思�\来一步步的写代码

一、关于坐标event.clientX和event.clientY�Q�而�ؓ什么不用event.x和event.y�Q�以后我会写清楚�Q�其实已�l�写好了的。看情况我就会脓出来。�{入正题吧�Q�看看参�?
clientX 讄��或获取鼠标指针位�|�相对于�H�口客户区域�?x 坐标�Q�其中客户区域不包括�H�口自��n的控件和滚动条�?
clientY 讄��或获取鼠标指针位�|�相对于�H�口客户区域�?y 坐标�Q�其中客户区域不包括�H�口自��n的控件和滚动条�?

二、得到拖动物件的坐标。即得到�l�对坐标�Q�用以下代码。参数e为拖动物件对象，使用函数时传入。返回的是对象的X坐标、Y坐标、宽度、长度的数组兌��。而�ؓ什么还要用�q�代求offsetLeft和offsetTop呢？因�ؓ他们是相对于父坐标而言的，所以必��通过循环来得到绝对定位�?br> function Offset(e) {
  var t = e.offsetTop;
  var l = e.offsetLeft;
  var w = e.offsetWidth;
  var h = e.offsetHeight;
  while(e=e.offsetParent) {
   t+=e.offsetTop;
   l+=e.offsetLeft;
  }
  return { t:t, l:l, w:w, h:h }
};

三、用事�g触发�E�序句柄�?br>obj.onmouseover=function() {
//to do; never-online Demo
};
obj.onmousedown=function() {
//to do; never-online Demo
}
obj.onmousemove=function() {
//to do; never-online Demo
}
obj.onmouseup=function() {
//to do; never-online Demo
}

四、拖动时得到坐标�?br>obj.onmousedown=function() {
//当按下时��C��原始坐标。never-online Demo
obj.X = event.clientX - Offset(obj).l;
obj.Y = event.clientY - Offset(obj).t;
}
obj.onmousemove=function() {
新坐标减��L��坐标得到当前位置 never-online Demo
obj.style.left = event.clientX - obj.X;
obj.style.top = event.clientY - obj.Y;
}

五、看看完整的��单拖动层代码吧�?br>

how to make a drag division - <a ><u><font color=#0000ff>http://www.never-online.net</font></u></a>

http://www.never-online.net

power by blueDestiny, never-online

never-online, Everlasting love for angela.

Power By blueDestiny, never-online, http://www.never-online.nethttp://www.never-online.net">http://www.never-online.net>

JiangMin 2007-05-15 22:38 发表评论

亚洲国产另类精品专区,日韩精品中文字,久久久免费精品视频

采用 ajax + vml 制作一个柱状图报表

Power By blueDestiny, never-online, http://www.never-online.nethttp://www.never-online.net">http://www.never-online.net>