在线交互式图形图表制作的解决方案.pdfVIP

2004年8月 安庆师范学院学报 (自然科学版) Agu．2004 第 1O卷第 3期 VOI．10NO．3 ,JournalofAnqlngTeachersCollege (NaturalScience) 在线交互式图形图表制作的解决方案 林 继 成 (安庆师范学院 计算机系， 安徽 安庆 246011) 摘 要：给出运用XMLDOM技术和Chart组件，设计在线交互式图形图表绘制应用程序的全过程。包括数 量不定的数据在线输入与提交的处理、数据的组织与解析、图形图表的生成、数据的在线修改等方面的内容。 关键词：计算机软件；Web应用，Chart组件，XMLDOM；图表制作 中图分类号：TP391 文献标识码；A 文章编号：1007--4260(2004)03--OO74一O4 在线交互式 图形 图表是 B／S模 式的网络应用 。远端用户通过浏览器一次性输入所有数据 ，服务器 端程序 负责将 用户提交 的数据 组织成 XML格 式并建 立数据文件 ，在客 户端接收 到 的下一页面 中生成 图形 图表 。如果数据有误 ，用户可立即修改然后重新生成 。 1．数据输 入 页面 用户输入 的数据有两类 ：一类是关于 图形 图表外观 的参数 ，另一类是坐标值 。参数包括 ：标题 、图形 的宽度和高度 、横坐标和纵坐标 的名称 、线型选择 (如 ：细实线 、细虚线 等)、类别选择 (如 ：折线 图、曲线 图、饼 图 等)。坐标值包括所有数据点 的横坐标值和纵坐标值 ，数据点 的个数是不确定 的且数据量可能 很大 。因此 ，将整个页面分为上下两部分 ：上部是输入 区，包含了输入各种参数 的文本框和下拉框 以及 输入一对坐 标值的两个文本框 ；下部是 已输入坐标值 的显示 区 (可 独立滚动 )，包含 一个空表~ (form)。 页面打 开 时下部为 空 ，每当用 户输 入 了一对 坐标值 并按下 回车键时 ，动态 创建 一对文 本框插 入 页面下 部 的表单 中 ，使 刚输入 的数据在下部显示 出来 ，同时清空上部数据输入框 。下面是创建 文本框的代码 ： function savedata(x，y) { ／／创建一个 文本 框对象保存横坐标值 ，并将其添加到表单 中 varobj— document．createElement(”input”)； obj．type一 ”text”；obj．name一 ”x[]”；obj．value= X； form1．appendChild(obj)； ／／创建一个文本框对象保存纵坐标值 ，并将其添加到表单 中(两个并列放置) obj= document．createElement(”input”)； obj．type一 ”text”；obj．name一 ”yE3”；obj．value= Y； form 1．appendChild(obj)； ／／添加断行元素 obj— document．createElement(”br”)； form 1．appendChild(obj)； obj．scrollIntoView ()；／／使新添加 的对象进入视场 ) 当用户 点击提交按钮 时 ，先运用类似 的方法将用户输入 ／选择 的所有参数 以隐藏文本框 的形式添 ·收稿Bjq}；2oo3一u一14 “ 作者简介：林继成(1956一)，男，浙江黄岩人，安庆师范学院计算机系副教授，主要研究计算机网络应用。 第 3期 林继成：在线交互式图形图表制作的解决方案 ·75 · 加到表 单 中 ，然后提交表 单 。需要 注意的是 ，所有 保存横 坐标的文本 框具有相 同的名 字 x口，所有保存纵 坐标的文本框 具有相 同的名字 yET。如果服务 器端使用 PHP脚本 ，PHP引擎会 自动将 它们整合成两个