MyException - 我的异常网
当前位置:我的异常网» Java Web开发 » 【共享】IE下实现3D柱状图(支持链接、事件),javas

【共享】IE下实现3D柱状图(支持链接、事件),javascript+vml实现,该怎么处理

www.MyException.Cn  网友分享于:2013-03-01  浏览:22次
【共享】IE下实现3D柱状图(支持链接、事件),javascript+vml实现
效果图和源码:http://blog.sina.com.cn/u/4762fc13010009r9
由于新浪博客不能发下载链接(我也没有空间放),我也很少来csdn看自己发过的帖子
所以麻烦需要的朋友请在博客后留言留下信箱,我会在第一时间发到你的邮箱。

        前段时间一个项目需要在IE(这个项目没有支持firefox等浏览器的需求)上呈现3D统计图。
 
        最初的解决方案是:用jfreechart等生成3D图,在页面上显示。
        缺陷:加入链接、事件等比较不方便
 
        改进后的解决方案:用flash画3D图,然后调用object显示。
        缺陷:调用的页面已经有很多flash   object了(一些复杂的需要交互的统计图,不得不用flash做,如:地图等),导致页面载入很慢。
 
        于是想到能不能用vml来做。当时还不像现在那么忙,空闲时间比较多。于是抽空写了一个vml的3D柱状图。缺陷也是非常明显:不支持IE以外的浏览器,甚至我在IE7下面还没有测试过。
 
        由于项目工期紧,flash的方案已经通过严格的测试了,所以最后没有采用vml的方案,我写的这个东西到一半也就夭折了。所幸还能给出一个demo。给需要的人吧。
 
          可能有的朋友见过这个图,这个是从网上找的一个效果修改的,原作者是龚鸣。大家可以上网搜到他最初的代码。
          除了显示效果,其它的东西我都重写了。主要改进如下:
        (1)支持位置控制。可以嵌入到页面的任何地方。对于嵌入的容器(div等),可以支持css控制。龚鸣的版本是没办法做到的,使用的是绝对位置。
        (2)重写数据定义方式:以前是数组,现在用json
        (3)重写调用方式:面向对象
        (4)支持数据重用
        (5)柱状图和文字过长,可自动用...代替,同时柱子和文字都支持链接、事件等。
 
        调用方式如下:
 
//   初始化数据,json
var   d   =   '[{ "value ": "201 ", "name ": "阿里巴巴   报价   中华   版权   代理   ", "id ": "12661_61 ", "url ": "http://www.baidu.com ", "target ": "_blank "},{ "value ": "43 ", "name ": "公积金贷款   存款   职工   专家   ", "id ": "12661_49 ", "behavior ": "active(this) "},{ "value ": "42 ", "name ": "美国伊拉克   华盛顿   五角大楼   越战   ", "id ": "12651_32 "},{ "value ": "26 ", "name ": "单位   广州   房价   政府   市长   ", "id ": "12671_29 "},{ "value ": "26 ", "name ": "学生   学校   泰国   寄宿   警方   ", "id ": "12651_40 "}] ';

var   data   =   eval( '( '+d+ ') ');

//   初始化柱状图
var   h   =   new   Histogram(data,340,280);

//   一些属性
h.setTitle( '当日前五热点统计图 ');
h.setNameLabel( '主题名称 ');
h.setValueLabel( '文档数量 ');

//   画图
h.draw( 'm ', 'V ');
 
        本来打算加上svg,以支持非ie的浏览器。但是由于时间关系,仅仅这个vml版本的很多已知问题都没有纠正。我想我近期也没有精力来做这个了。放出来,需要的人拿去用吧~~
 
        尽管代码我完全重写了,但是显示效果还是要注明来自网友龚鸣和绝对零度(awaysrain),版权就归这两位所有吧,我没有其他附加的限制。


      需要索取源码的,请在
      http://blog.sina.com.cn/u/4762fc13010009r9
      留下信箱~~

------解决方案--------------------
帮顶一下!
------解决方案--------------------
yuyezhejiang@163.com
谢谢了
------解决方案--------------------
ccg@zwu.edu.cn
谢谢
------解决方案--------------------
FrankieGao@21cn.com
谢谢了,帮顶

------解决方案--------------------
long5973@163.com
谢谢了,帮顶

文章评论

那些争议最大的编程观点
那些争议最大的编程观点
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
Java程序员必看电影
Java程序员必看电影
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员必看的十大电影
程序员必看的十大电影
中美印日四国程序员比较
中美印日四国程序员比较
老程序员的下场
老程序员的下场
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
为什么程序员都是夜猫子
为什么程序员都是夜猫子
编程语言是女人
编程语言是女人
一个程序员的时间管理
一个程序员的时间管理
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员的鄙视链
程序员的鄙视链
程序员应该关注的一些事儿
程序员应该关注的一些事儿
代码女神横空出世
代码女神横空出世
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员和编码员之间的区别
程序员和编码员之间的区别
总结2014中国互联网十大段子
总结2014中国互联网十大段子
如何成为一名黑客
如何成为一名黑客
每天工作4小时的程序员
每天工作4小时的程序员
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我的丈夫是个程序员
我的丈夫是个程序员
 程序员的样子
程序员的样子
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
漫画:程序员的工作
漫画:程序员的工作
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
10个调试和排错的小建议
10个调试和排错的小建议
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
旅行,写作,编程
旅行,写作,编程
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
我是如何打败拖延症的
我是如何打败拖延症的
程序员都该阅读的书
程序员都该阅读的书
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
鲜为人知的编程真相
鲜为人知的编程真相
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有