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

【共享】IE下实现3D柱状图(支持链接、事件),javascript+vml实现,该如何解决

www.MyException.Cn  网友分享于:2013-03-10  浏览:27次
【共享】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
      留下信箱~~

------解决方案--------------------
up....
------解决方案--------------------
JAVA版的兄弟哦
------解决方案--------------------
请问楼主,画过圆柱体吗
------解决方案--------------------
请楼主给我一份 谢谢 msf_job@126.com
------解决方案--------------------
给我看下,学习一下wujiawen19@163.com,谢了!!!

文章评论

旅行,写作,编程
旅行,写作,编程
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
程序员都该阅读的书
程序员都该阅读的书
Java程序员必看电影
Java程序员必看电影
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员必看的十大电影
程序员必看的十大电影
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
老程序员的下场
老程序员的下场
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员的鄙视链
程序员的鄙视链
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
代码女神横空出世
代码女神横空出世
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
总结2014中国互联网十大段子
总结2014中国互联网十大段子
10个调试和排错的小建议
10个调试和排错的小建议
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
如何成为一名黑客
如何成为一名黑客
我的丈夫是个程序员
我的丈夫是个程序员
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
 程序员的样子
程序员的样子
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
为什么程序员都是夜猫子
为什么程序员都是夜猫子
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
编程语言是女人
编程语言是女人
我是如何打败拖延症的
我是如何打败拖延症的
每天工作4小时的程序员
每天工作4小时的程序员
鲜为人知的编程真相
鲜为人知的编程真相
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
那些争议最大的编程观点
那些争议最大的编程观点
一个程序员的时间管理
一个程序员的时间管理
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
漫画:程序员的工作
漫画:程序员的工作
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有