class_statistical_chart.js

用VML+JavaScript写的一个通用统计图表

		//定义一个 vml统计图的 类
		function cls_statistical_chart()
		{
			///////////////////////////////////
			//property definition
			this.Copyleft = "Copyleft";	//自由软件授权
			this.title = "QingFeng VML Statistical Chart";	//图表的标题
			
			//x, y 坐标轴的单位 名称和单位长度（以像素为单位）
			this.x_axis_unit_name = "";	//保留
			this.x_axis_lengthpx = 400;
			
			this.y_axis_unit_name = "";	//保留
			this.y_axis_lengthpx = 200;

			//原点坐标
			this.zero_point_x = 0;
			this.zero_point_y = 0;

			//逻辑尺寸
			this.logic_width = 10000;
			this.logic_height = 10000;

			//用户定义的区间
			this.user_x_from = 0;
			this.user_x_to = 10000;

			this.user_y_from = 0;
			this.user_y_to = 10000;

			//x, y 坐标轴上的标尺标记
			this.x_axis_tag_ary = new Array();
			this.y_axis_tag_ary = new Array();

			//统计项目的数据数组
			this.data_item_ary = new Array();
			this.data_item_ary.push(0);
			/*
				这个数组的[0]是统计项目的个数，即它后面有几个项目需要统计
				后面的元素条目是数组，格式为：
					[0] = "项目名称"
					[1] = "线条颜色"
					[2] = "数据点的个数n"
					[3] = "此项目的说明信息"

					[4] = 第一个点的 x
					[5] = 第一个点的 y

					如 [4],[5] 所示，后面是 成对的点 的 x,y 坐标值
			*/
			
			////////////////////////////////
			//methord definition
			this.draw = cls_statistical_chart_draw;	//画整个图表，是其他几个函数的组装
			this.getaxis = cls_statistical_chart_getaxis;	//画坐标轴
			this.getpolyline = cls_statistical_chart_getpolyline;	//画统计数据形成的折线

			this.addpolyline = cls_statistical_chart_addpolyline;	//添加一条折线（统计项目）
			this.getitemlist = cls_statistical_chart_getitemlist;	//画图示

			this.user_to_logic = cls_statistical_chart_user_to_logic;
		}

		//画整个图表，是其他几个函数的组装
		function cls_statistical_chart_draw()
		{
			var str_vml = "";

			str_vml = str_vml + this.getaxis();
			str_vml = str_vml + this.getpolyline();

			////打包图形
			var str_group = "";

			str_group = "<v:group id=\"QingFeng_Statistical_" + Math.floor(Math.random()).toString() + "\" ";
			str_group = str_group + " style=\"position:relative; width:" + this.x_axis_lengthpx.toString() + "px; height:" + this.y_axis_lengthpx.toString() + "px;\" ";
			str_group = str_group + " CoordSize=\"" + this.logic_width.toString() + "," + this.logic_height.toString() + "\" ";
			str_group = str_group + ">"
			
			str_group = str_group + "<!--v:rect style=\"width:" + this.logic_width.toString() + "px; height:" + this.logic_height.toString() + "px;\" filled=\"false\" /-->"

			//<!--统计图数据 开始-->
			str_vml = str_group + str_vml + "</v:group>"
			//<!--统计图数据 结束-->
			/////alert(this.x_axis_tag_ary.length.toString());
			return str_vml;
		}

		//画坐标轴
		function cls_statistical_chart_getaxis()
		{
			var str_x_axis = "";
			var str_x_assistant = "";
			var str_y_axis = "";
			var str_y_assistant = "";
			var str_axis = "";

			this.zero_point_x = 1;
			this.zero_point_y = this.logic_height - 1;

			//画坐标轴
			str_x_axis = "<v:line id=x_axis from=\"" + this.zero_point_x.toString() + "," + (this.zero_point_y).toString() + "\" to=\"" + (this.logic_width).toString() + "," + (this.zero_point_y).toString() + "\"><v:stroke EndArrow=\"Classic\" /></v:line>"
			str_y_axis = "<v:line id=y_axis from=\"" + this.zero_point_x.toString() + "," + (this.zero_point_y).toString() + "\" to=\"" + this.zero_point_x.toString() + ",0\"><v:stroke EndArrow=\"Classic\" /></v:line>"
			
			var i = 0;
			//画 x， y 上的标号
			for ( i=1; i<=this.x_axis_tag_ary.length; i++)
			{
				str_x_axis = str_x_axis + "<v:shape strokecolor=\"none\" filled=\"False\" style=\"left:" + (this.zero_point_x + this.logic_width / (this.x_axis_tag_ary.length+1) * i - (this.x_axis_tag_ary[i-1].length * 250 * 300/this.x_axis_lengthpx) / 2).toString() + ";top:" + (this.zero_point_y).toString() + ";width:" + (this.x_axis_tag_ary[i-1].length * 250 * 400/this.x_axis_lengthpx).toString() + ";height:" + (300 * 400/this.y_axis_lengthpx).toString() +";\" inset=\"1px,1px,1px,1px\">";
				str_x_axis = str_x_axis + "<div align=\"center\" title=\"" + this.x_axis_tag_ary[i-1] + "\" style=\"cursor:hand;font-size:7pt;color:blue\">" + this.x_axis_tag_ary[i-1] + "</div>";
				str_x_axis = str_x_axis + "</v:shape>";

				//画辅助线--竖向
				str_x_assistant = "<v:line id=x_assistant from=\"" + (this.zero_point_x + this.logic_width / (this.x_axis_tag_ary.length+1) * i).toString() + "," + (this.zero_point_y).toString() + "\" to=\"" + (this.zero_point_x + this.logic_width / (this.x_axis_tag_ary.length+1) * i).toString() + "," + "0" + "\"";
				//str_x_assistant = str_x_assistant + " style=\"cursor:hand; \"";
				str_x_assistant = str_x_assistant + "><v:stroke dashstyle=\"Dot\"/></v:line>";

				str_x_axis = str_x_axis + str_x_assistant;
			}

			for ( i=1; i<=this.y_axis_tag_ary.length; i++)
			{
				str_y_axis = str_y_axis + "<v:shape strokecolor=\"none\" filled=\"False\" style=\"left:" + (this.zero_point_x - (this.y_axis_tag_ary[i-1].length * 250 * 300/this.x_axis_lengthpx)).toString() + ";top:" + (this.zero_point_y - this.logic_height / (this.y_axis_tag_ary.length+1) * i - 100).toString() + ";width:" + (this.y_axis_tag_ary[i-1].length * 250 * 300/this.x_axis_lengthpx).toString() + ";height:" + (300 * 400/this.y_axis_lengthpx).toString() +";\" inset=\"1px,1px,1px,1px\">";
				str_y_axis = str_y_axis + "<div title=\"" + this.y_axis_tag_ary[i-1] + "\" style=\"Text-align:right;cursor:hand;font-size:7pt;color:blue\">" + this.y_axis_tag_ary[i-1] + "</div>";
				str_y_axis = str_y_axis + "</v:shape>";

				//画辅助线--横向
				str_y_assistant = "<v:line id=y_assistant from=\"" + (this.zero_point_x).toString() + "," + (this.zero_point_y - this.logic_height / (this.y_axis_tag_ary.length+1) * i).toString() + "\" to=\"" + this.logic_width.toString() + "," + (this.zero_point_y - this.logic_height / (this.y_axis_tag_ary.length+1) * i).toString() + "\"";
				//str_y_assistant = str_y_assistant + " style=\"cursor:hand; \"";
				str_y_assistant = str_y_assistant + "><v:stroke dashstyle=\"Dot\"/></v:line>";

				str_y_axis = str_y_axis + str_y_assistant;
			}


			//合成
			str_axis = str_x_axis + str_y_axis;

			return str_axis;
		}

		//画统计数据形成的折线
		function cls_statistical_chart_getpolyline()
		{
			var rtitle;
			var polyline_ary = new Array();

			var polyline = "";
			var polylines = "";

			this.zero_point_x = 1;
			this.zero_point_y = this.logic_height - 1;

			var i = 0;
			var i_temp = 0;
			var temp_ary;

			for (i=1; i<=this.data_item_ary[0]; i++)
			{
				polyline = "\" filled=\"false\"/>";
				temp_ary = this.data_item_ary[i];
				//alert(temp_ary);
				for (i_temp=temp_ary[2]*2+4-1; i_temp>3; i_temp-=2)
				{
					polyline = "," + (this.zero_point_y - temp_ary[i_temp]).toString() + polyline;	//y
					polyline = " " + (this.zero_point_x + temp_ary[i_temp-1]).toString() + polyline;	//x
				}
				
				polyline = " points=\"" + polyline;
				polyline = " strokeColor=\"" + temp_ary[1] + "\" " + polyline;
				polyline = "<v:polyline style=\"cursor:hand;\" title=\"" + temp_ary[0] + "\n说明:" + temp_ary[3] + "\"" + polyline;

				//polyline_ary.push(polyline);
				polylines = polylines + polyline;
			}

			return polylines;

		}

		function cls_statistical_chart_getitemlist()
		{
			;
		}

		function cls_statistical_chart_addpolyline( polyline_data_ary )
		{
			var data_ary = new Array();
			
			data_ary.push(polyline_data_ary[0]);	//项目名称
			data_ary.push(polyline_data_ary[1]);	//图表颜色
			data_ary.push(polyline_data_ary[2]);	//后面的数据元素
			data_ary.push(polyline_data_ary[3]);	//项目说明

			var i = 0;
			var l;
			for (i=0; i<data_ary[2]; i++)
			{
				data_ary.push(this.logic_width / (this.x_axis_tag_ary.length + 1) * (i+1));	//自动填充 x
				data_ary.push(this.user_to_logic(polyline_data_ary[i+4], this.user_y_from, this.user_y_to, this.logic_height, this.y_axis_tag_ary.length));
			}

			this.data_item_ary.push(data_ary);	//注册到管理器
			this.data_item_ary[0]++;
		}

		function cls_statistical_chart_user_to_logic( user_value, user_start, user_end, logic_range, axis_tag_ary_length)
		{
			var unit_size;

			unit_size = logic_range / (axis_tag_ary_length + 1);

			var logic_value = 0;

			logic_value = unit_size + logic_range * (1 - 2 / (axis_tag_ary_length + 1)) * (user_value - user_start) / (user_end - user_start);

			return logic_value;
		}

		/////////////////////////////////