这是07年初写的，直到现在还经常有人发信来要代码，在这里提供吧:) 以前的博客不能上传附件。

一个项目需要在IE（这个项目没有支持firefox等浏览器的需求）上呈现3D统计图。

最初的解决方案是：用jfreechart等生成3D图，在页面上显示。
缺陷：加入链接、事件等比较不方便

改进后的解决方案：用flash画3D图，然后调用object显示。
缺陷：调用的页面已经有很多flash object了（一些复杂的需要交互的统计图，不得不用flash做，如：地图等），导致页面载入很慢。

于是想到能不能用vml来做。当时还不像现在那么忙，空闲时间比较多。于是抽空写了一个vml的3D柱状图。缺陷也是非常明显：不支持IE以外的浏览器，甚至我在IE7下面还没有测试过。

由于项目工期紧，flash的方案已经通过严格的测试了，所以最后没有采用vml的方案，我写的这个东西到一半也就夭折了。所幸还能给出一个demo。给需要的人吧。

纵向效果图：

1

横向效果图：

2

可能有的朋友见过这个图，这个是从网上找的一个效果修改的，原作者是龚鸣。大家可以上网搜到他最初的代码。


除了显示效果，其它的东西我都重写了。主要改进如下：

  1. 支持位置控制。可以嵌入到页面的任何地方。对于嵌入的容器（div等），可以支持css控制。龚鸣的版本是没办法做到的，使用的是绝对位置。
  2. 重写数据定义方式:以前是数组，现在用json
  3. 重写调用方式:面向对象
  4. 支持数据重用
  5. 柱状图和文字过长，可自动用…代替，同时柱子和文字都支持链接、事件等。

调用方式如下：

?View Code JAVASCRIPT
// 初始化数据,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)。

以前没有用过vml，也就看了一会书，2007年也是刚开始做web，没有写过太多javascript，这里就算一个demo吧。

下载：codigg-3d-chart-demo