利用SVG在Wbe应用程序中创建客户端图表交互.docVIP

利用 SVG 在 Web 应用程序中创建客户端图表交互 建立一个基于 Web 的 SVG 协作示例 Cameron Laird, 副总裁, Phaseit, Inc. 简介：?SVG 的成熟推动当前未文档化的可视元素的一种少见的使用和开发风格。在 “数据即服务” 盛行的现在，从外围 Web 应用程序编写 SVG 实例脚本变得非常重要。一个动态 choropleth 图的特定示例演示了该技术有多么容易掌握。 简介 本文给出一个具体的 Web 页面，Web 开发人员及其管理者都将会对它感兴趣。尽管代码编写理解起来足够简单，但是它建模了一个超出传统的基于表单的 Web 应用程序的 GUI 效果。此效果： 只依赖于公共标准。 执行起来至少跟专有备选方案一样好。 开启了全新的团队合作和协作模型。 给出一种以前肯定没有明确地做过文档化的实现技术。 本文有以下三个目标： 从用户角度演示一个特定的标准兼容的基于 Web 的 GUI 效果的操作。 从开发人员的角度解释协作模型，作为 Web 和 SVG 技术之间深入协作的一个例子。 阐明 HTML5 如何促进复杂 Web 应用程序开发中新的劳动分工，因为团队领导者想要知道。 本文面向的读者群体是，他们能够很好地看懂 Web 页面的 HTML 和 JavaScript 典型代码，但是不必流利地用这些语言编写代码。无需 SVG 经验。必须熟悉 XML。尽管不依赖于特定的操作系统，但是希望输出到各种不同的浏览器。常用缩写词 CSS：层叠样式表 DAAS：数据即服务 DOM：文档对象模型 GIF：图形交换格式 GUI：图形用户界面 HTML：超文本标记语言 JPEG：联合图像专家组 MVC：模型视图控制器 PNG：便携式网络图像 SVG：可伸缩矢量图 SOA：面向服务的架构 TIFF：标记图像文件格式 WSDL：Web 服务描述语言 XHTML：可扩展超文本标记语言 XML：可扩展标记语言 回页首 一个实际例子 要运行本文中的例子，使用 Microsoft? Internet Explorer? 以外的一种现代浏览器：Safari、Opera、Chrome、Firefox 和 QtWeb 通常都不错。尽管至少有好几种有效的方式在 Internet Explorer 中运行本文的 SVG，但是简单地依赖于一种更加标准兼容的浏览器在编写本文期间还是更为可取的。 您有必要亲自体验一下此 Web 页面提供的效果。首先从我的 Web 站点查看本文重要的实际例子；链接在?参考资料?的第一项中。或者，也可以从?下载?部分下载源文件，解压，并在浏览器中打开 outside_in.html 文件。两种情况下，浏览器中都应该出现类似于?图 1的图像，其中所有 50 个州和美国属国都是一种颜色。整个美国的地图（带有维尔京群岛、关岛和哥伦比亚特区的插页地图）以单色显示，颜色代表这个国家的食品券参与率（food stamp participation rate）。在本例中，单色是红色，此时的参与率是 0.0%。 图 1. 当选择的阈值是 0.0 时美国食品券参与率的布色? 部分效果是它的动态响应。在实际例子中，将显示器顶部的滑块指针稍微向右移动一点（就是将鼠标指针放在它上面，按下鼠标左键拖动，然后释放鼠标左键）。您会看到标注为?threshold?的这个数字更新了，可能从 0.0 变为比如说 6.2 这样的值。马上，地图重新着色，以匹配新的阈值。地图布色的含义是：食品券参与率低于阈值的州都以白色显示，食品券参与率至少是阈值的两倍的州都以红色显示，食品券参与率为中间值（即大于阈值但小于阈值的两倍）的州以黄色显示。 回页首 快照 来看一个例子：2009 年 6 月，内布拉斯加州报告其居民使用食品券的比率是 7.8%。如果阈值设置为 0 到 3.9 之间的任何值，那么像图 2?中那样，内布拉斯加州显示为红色。在本例中，整个美国的地图（带有维尔京群岛、关岛和哥伦比亚特区的插页地图）将怀俄明州和新泽西州显示为黄色，所有其他州和属国显示为红色。 图 2. 当选择的阈值是 3.1 时美国食品券参与率的布色? 当阈值是 3.9 到 7.8 时，如?图 3?所示，内布拉斯加州显示为黄色。在本例中，整个美国的地图（带有维尔京群岛、关岛和哥伦比亚特区的插页地图）将内布拉斯加州和大多数州及属国显示为纯黄色，17 个州为纯红色，4 个州为纯白色。 图 3. 当选择的阈值是 6.9 时美国食品券参与率的布色? 对于任何高于 7.8 的值，这个州的颜色更改为白色。在?图 4?中，选择的阈值是 9.9。在本例中，整个美国的地图（带有维尔京群岛、关岛和哥伦比亚特区的插页地图）将17 个州和属国显示为纯白色，其余为纯黄色。 图 4. 当选择的阈值是 9