集成现有数据——使用XML数据

最新推荐文章于 2022-08-06 09:50:49 发布

dezhen7792

最新推荐文章于 2022-08-06 09:50:49 发布

阅读量169

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/yankyblogs/p/11145158.html

版权

此文档解决以下问题：

一、从标准文本文件中读取数据

1.读取txt文件

1.1 从文本文件中读取数据

1.2 将文本文件中的数据读入数组，并作为列表输出

1.3 从文本文件中的读取数据，以警告框输出

1.4 从文本文件中的读取数据和状态，以警告框输出

2.读取CSV文件

2.1 将文本文件中的数据读入对象并作为表输出

二、使用XML数据

3.读取XML文件

3.1 xml数据导入

4.使用XSLT设计样式

4.1 XML数据导入和转换，并使用XSLT设计样式

三、使用JSON数据

5.读取JSON文件

5.1 直接访问JSON值

5.2 使用JSON.parse()方法访问

5.3 使用$.getJSON()方法访问

5.4 JSON数据在画布绘制图表

　　数据可视化工作最大的一部分工作涉及的是渲染现有数据。数据可以被存储为许多不同的格式——普通文本，CSV、XML、JSON和其他格式——但只要是数字格式，JavaScript或其他服务器端例程就与可能访问该信息用于展示。当然在某些情况下，例如构建复杂的图表时，会要求你手动处理数据。不过，在可能的情况下，将内容（数据）和显示（图表）分离是一个好主意。

3.读取XML文件

regional_sales.xml中，

<?xml version="1.0" encoding="UTF-8"?>
  <sales> <region year="2013"> <territory>Northeast</territory> <employees>150</employees> <amount>115,000</amount> </region> <region year="2013"> <territory>Southeast</territory> <employees>125</employees> <amount>95,000</amount> </region> <region year="2013"> <territory>Midwest</territory> <employees>225</employees> <amount>195,000</amount> </region> <region year="2013"> <territory>West</territory> <employees>325</employees> <amount>265,000</amount> </region> </sales>

3.1 xml数据导入，import_xml.html中，

<!doctype html>
<html> <head> <meta charset="UTF-8"> <title>XML Data Imported</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> table { border-collapse: collapse; } td { width: 200px; border-bottom: 1px solid #000; padding: 5px; margin: 0; } th { text-align: left; } </style> </head> <body> <h1>XML Data Imported</h1> <table id="sales"> <tr> <th>Territory</th> <th>Employees</th> <th>Sales</th> </tr> </table> <script> $(document).ready(function() { //通过使用ajax()，可以获得xml文件并将数据发送到一个自定义的解析函数中  $.ajax({ type: "GET", url: "regional_sales.xml", dataType: "xml", success: xmlParser }); }); //自定义解析mlParser函数 function xmlParser(xml) { //jquery的find函数定位xml中的节点 //each循环中，将xml的值赋给遍历，并使用这些遍历构建标记  $(xml).find('region').each(function() { var theTerritory = $(this).find('territory').text(); var numEmployees = $(this).find('employees').text(); var theAmount = $(this).find('amount').text(); $('#sales').append('<tr><td>' + theTerritory + '</td><td>' + numEmployees + '</td><td>$' + theAmount + '</td></tr>'); }); } </script> </body> </html>

运行结果：

4.使用XSLT设计样式

regional_sales_xslt.xml中，

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="import_xml_xslt.xslt"?> <sales> <region year="2013"> <territory>Northeast</territory> <employees>150</employees> <amount>115,000</amount> </region> <region year="2013"> <territory>Southeast</territory> <employees>125</employees> <amount>95,000</amount> </region> <region year="2013"> <territory>Midwest</territory> <employees>225</employees> <amount>195,000</amount> </region> <region year="2013"> <territory>West</territory> <employees>325</employees> <amount>265,000</amount> </region> </sales>

4.1 XML数据导入和转换，并使用XSLT设计样式，import_xml_xslt.xslt中

导入了xml数据后，可使用css设计它的样式。不过，在处理xml时，构建JavaScript字符串可能不是最高效的方式。尤其是如果有许多数据分散在整个页面中是。另一个选项是使用XSLT(可扩展样式表转换语言)。XSLT的工作流程：

1）创建xml数据文件

2）在xml数据文件中添加一个XSLT样式表的链接

3）使用xml和xsl标记封装html

4）在html中使用xsl标记

5）浏览xml文件

附：XSLT 教程

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" encoding="utf-8" indent="yes" /> <xsl:template match="/"> <html> <head> <meta charset="UTF-8" /> <title>XML Data Imported</title> <style> table { border-collapse: collapse; } td { width: 200px; border-bottom: 1px solid #000; padding: 5px; margin: 0; } tr:nth-child(even) { background-color: #FFFF66; } th { text-align: left; } </style> </head> <body> <h1>XML Data Imported and Transformed by XSLT</h1> <table id="sales"> <tr> <th>Territory</th> <th>Employees</th> <th>Sales</th> </tr> <xsl:for-each select="sales/region"> <tr> <td> <xsl:value-of select="territory" /> </td> <td> <xsl:value-of select="employees" /> </td> <td>$ <xsl:value-of select="amount" /> </td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

在demo.html中，点击a标签

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="regional_sales_xslt.xml">XSL设计样式</a> </body> </html>

运行结果：

正文结束~~~

转载于:https://www.cnblogs.com/yankyblogs/p/11145158.html

dezhen7792

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
集成现有数据——使用XML数据

此文档解决以下问题：一、从标准文本文件中读取数据1.读取txt文件 1.1 从文本文件中读取数据 1.2 将文本文件中的数据读入数组，并作为列表输出 1.3 从文本文件中的读取数据，以警告框输出 1.4 从文本文件中的读取数据和状态，以警告框输出2.读取CSV文件 2.1 将文本文件中的数据读入对象并作为表输出二、使用XML数据3.读取...
复制链接

扫一扫