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

《利用SVG 在 Web 应用程序中创建客户端图表交互》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、利用SVG在Web应用程序中创建客户端图表交互建立一个基于Web的SVG协作示例CameronLaird,副总裁,Phaseit,Inc.简介： SVG的成熟推动当前未文档化的可视元素的一种少见的使用和开发风格。在“数据即服务”盛行的现在，从外围Web应用程序编写SVG实例脚本变得非常重要。一个动态choropleth图的特定示例演示了该技术有多么容易掌握。简介本文给出一个具体的Web页面，Web开发人员及其管理者都将会对它感兴趣。尽管代码编写理解起来足够简单，但是它建模了一个超出传统的基于表单的Web应用程序的GUI效果。此效果：·只依赖于公共标准。·执行起来至少跟专有备选方案

2、一样好。·开启了全新的团队合作和协作模型。·给出一种以前肯定没有明确地做过文档化的实现技术。本文有以下三个目标：·从用户角度演示一个特定的标准兼容的基于Web的GUI效果的操作。·从开发人员的角度解释协作模型，作为Web和SVG技术之间深入协作的一个例子。·阐明HTML5如何促进复杂Web应用程序开发中新的劳动分工，因为团队领导者想要知道。本文面向的读者群体是，他们能够很好地看懂Web页面的HTML和JavaScript典型代码，但是不必流利地用这些语言编写代码。无需SVG经验。必须熟悉XML。尽管不依赖于特定的操作系统，但是希望输出到各种不同的浏览器。常用缩写词·CSS：层叠样

3、式表·DAAS：数据即服务·DOM：文档对象模型·GIF：图形交换格式·GUI：图形用户界面·HTML：超文本标记语言·JPEG：联合图像专家组·MVC：模型视图控制器·PNG：便携式网络图像·SVG：可伸缩矢量图·SOA：面向服务的架构·TIFF：标记图像文件格式·WSDL：Web服务描述语言·XHTML：可扩展超文本标记语言·XML：可扩展标记语言回页首一个实际例子要运行本文中的例子，使用Microsoft®InternetExplorer®以外的一种现代浏览器：Safari、Opera、Chrome、Firefox和QtWeb通常都不错。尽管至少有好几种有效的方式在Inte

4、rnetExplorer中运行本文的SVG，但是简单地依赖于一种更加标准兼容的浏览器在编写本文期间还是更为可取的。您有必要亲自体验一下此Web页面提供的效果。首先从我的Web站点查看本文重要的实际例子；链接在 参考资料 的第一项中。或者，也可以从 下载 部分下载源文件，解压，并在浏览器中打开outside_in.html文件。两种情况下，浏览器中都应该出现类似于 图1的图像，其中所有50个州和美国属国都是一种颜色。整个美国的地图（带有维尔京群岛、关岛和哥伦比亚特区的插页地图）以单色显示，颜色代表这个国家的食品券参与率（foodstampparticipationrate）。在本例

5、中，单色是红色，此时的参与率是0.0%。图1.当选择的阈值是0.0时美国食品券参与率的布色 部分效果是它的动态响应。在实际例子中，将显示器顶部的滑块指针稍微向右移动一点（就是将鼠标指针放在它上面，按下鼠标左键拖动，然后释放鼠标左键）。您会看到标注为 threshold 的这个数字更新了，可能从0.0变为比如说6.2这样的值。马上，地图重新着色，以匹配新的阈值。地图布色的含义是：食品券参与率低于阈值的州都以白色显示，食品券参与率至少是阈值的两倍的州都以红色显示，食品券参与率为中间值（即大于阈值但小于阈值的两倍）的州以黄色显示。回页首快照来看一个例子：2009年6月，内布拉斯加州报告

6、其居民使用食品券的比率是7.8%。如果阈值设置为0到3.9之间的任何值，那么像图2 中那样，内布拉斯加州显示为红色。在本例中，整个美国的地图（带有维尔京群岛、关岛和哥伦比亚特区的插页地图）将怀俄明州和新泽西州显示为黄色，所有其他州和属国显示为红色。图2.当选择的阈值是3.1时美国食品券参与率的布色 当阈值是3.9到7.8时，如 图3 所示，内布拉斯加州显示为黄色。在本例中，整个美国的地图（带有维尔京群岛、关岛和哥伦比亚特区的插页地图）将内布拉斯加州和大多数州及属国显示为纯黄色，17个州为纯红色，4个州为纯白色。图3.当选择的阈值是6.9时美国食品券参与率的布色 对于任何高于7.8

7、的值，这个州的颜色更改为白色。在 图4 中，选择的阈值是9.9。在本例中，整个美国的地图（带有维尔京群岛、关岛和哥伦比亚特区的插页地图）将17个州和属国显示为纯白色，其余为纯黄色。图4.当选择的阈值是9.9时美国食品券参与率的布色 由于Threshold字段中的值是动态变化的，所以州或属国的颜色会根据这个州的食品券参与率而改变。（查看 生动的例子。）在本例中，视图在以下阈值和颜色之间变化。·0.0阈值-所有州和属国都显示为纯红色（如 图1 所示）。·3.1阈值-怀俄明州和新泽西州