点击这里给我发消息 点击这里给我发消息

利用vml制作统计图全攻略----饼图的制作(一)

添加时间:2010-1-5
    相关阅读: ASP HTML JavaScript 制作

 VML(Vector Markup Language)自从问世以来似乎都处于默默无闻的地步,直到现在为止,情况依然没有改变。其实细心的一点你就可以发现,在Web方面,MS得很多产品还是内置使用了,最典型的就是Office的自选图形,将word或者ppt文档存储成html,如果文档内部使用了自选图形,你就可以看到那些图形使用过VML来表述的,另外一个典型的应用就是Visio的导出到web这个工具。

  前段时间,James在CSDN发表了使用ASP生成统计图的例子,我也认真拜读了其中的代码,并且也针对一些问题找他请教了,James的颜色感觉非常好,可惜我没有那样的功底,因此在代码实现中我就使用了随机颜色来实现,可能整体的界面看起来会稍微差劲一点。

  统计图比较典型的是饼图,柱状图,曲线图,本文着重讲解Pie的制作过程,文章采用了JavaScript实现了一个类,如果相关Javascript面向对象不是特别了解的,可以参考我另外的文章《面向对象的Javascript编程》和《再论面向对象的JavaScript编程》。

  暂且不考虑如何实现,我们先看看代码最终的使用如何。

   objPie=new VMLPie("600px","450px","人口统计图"); //初始化宽度,高度,标题
     objPie.BorderWidth=3; //图表边框
     objPie.BorderColor="blue"; //图表边框颜色
     objPie.Width="800px"; //定义图表宽度
     objPie.Height="600px"; //定义图表高度    
     objPie.backgroundColor="#ffffff"; //定义背景颜色
     objPie.Shadow=true; //是否需要阴影 true为是 false为不要阴影
     //添加图表数据
     //顺序为名称,值,描述
     objPie.AddData("北京",50,"北京的人口");
     objPie.AddData("上海",52,"上海的固定人口");
     objPie.AddData("天津",30,"天津的外地人口");
     objPie.AddData("西安",58,"西安城市人口");
     objPie.AddData("武汉",30,"武汉的外地人口");
     objPie.AddData("重庆",58,"重庆城市人口");
     result.innerHTML=objPie.Draw(); //生成VML数据

  这段代码就是最终的调用,我封装了一个VMLPie的JavaScript类,而本文的重点也就是详细地描述类的具体实现过程,另外要使用VML必须作如下的声明。

  1. HTML Tag的名字空间声明

  <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

  2. <head>之间的style声明

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册