Question

我想在Javascript中过滤几个xml文件，以填充google图表散点图。

问题是，我必须使用流解析，因为每个文件都非常大，超过3.5 MB。

如何将数据从4MB xml文件传递到javascript数组中，我可以循环使用而不会耗尽内存

示例：

<?xml version="1.0" encoding="UTF-8"?>
<rootNode a="1">
    <parentNode b="2" c="3" d="4">
        <childNode e="5" f="7" g="7"/>
        <childNode e="2" f="9" g="4"/>
        <childNode e="11" f="7" g="3"/>
        ...
    </parentNode>
</rootNode>

要

var chart = [],
fIsSeven = [],
childNode = /*Each node of xml*/;

// Filter results and save data to 2D array
foreach (childNode) {
    if(f == 7) {
        fIsSeven = [e, g];
        chart.push(fIsSeven);
    }
}

...

// Use array to populate google chart
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['e', 'g'],

        forEach (chart) {
            [e, g]
        }
    ]);

...

}

Answer 1

我发现从大型xml文件加载Google数据表的最快方法是使用xsl将数据转换为google's json format，然后直接从json创建数据表...

以下是用于加载Google ...的Cognos报告中的XML数据示例

XML

<metadata>
      <item name="Level 1" type="xs:string" length="38"/>
      <item name="Level 2" type="xs:string" length="302"/>
      <item name="Level 3" type="xs:string" length="302"/>
      <item name="Level 4" type="xs:string" length="302"/>
      <item name="Level 5" type="xs:string" length="302"/>
      <item name="Expenditure Group" type="xs:string" length="48"/>
      <item name="GL Number" type="xs:double" precision="2"/>
      <item name="Actual" type="xs:double" precision="2"/>
      <item name="Budget" type="xs:double" precision="2"/>
      <item name="Forecast" type="xs:double" precision="2"/>
      <item name="Category" type="xs:string" length="102"/>
</metadata>
<data>
    <row>
        <value>SBU</value>
        <value>BU</value>
        <value>Department</value>
        <value>Office</value>
        <value>Site</value>
        <value>Expense</value>
        <value>3</value>
        <value>13811.22</value>
        <value>6175</value>
        <value>13811.22</value>
        <value>Category</value>
    </row>
    <row>
        <value>SBU</value>
        <value>BU</value>
        <value>Department</value>
        <value>Office</value>
        <value>Site</value>
        <value>Expense</value>
        <value>3</value>
        <value>13811.22</value>
        <value>6175</value>
        <value>13811.22</value>
        <value>Category</value>
    </row>
    ...

以下是用于将XML转换为谷歌的JSON格式的XSL ......

XSL

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns="http://tempuri.org/"
  xmlns:cog="http://developer.cognos.com/schemas/xmldata/1/"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
  <xsl:output method="text" omit-xml-declaration="yes" indent="no" />
  <xsl:template match="/">
    {
      "cols": [
        {"label": "SBU", "type": "string"},
        {"label": "BU", "type": "string"},
        {"label": "Department", "type": "string"},
        {"label": "Office", "type": "string"},
        {"label": "Site", "type": "string"},
        {"label": "Expenditure Group", "type": "string"},
        {"label": "Period", "type": "number", "p": {"format": "d2"}},
        {"label": "Actual", "type": "number", "p": {"format": "n2"}},
        {"label": "Budget", "type": "number", "p": {"format": "n2"}},
        {"label": "Forecast", "type": "number", "p": {"format": "n2"}},
        {"label": "O&amp;M Category", "type": "string"}
      ],
      "rows": [
      <xsl:for-each select="//cog:row">
        {"c":[
          {"v": "<xsl:value-of select="cog:value[1]" />"},
          {"v": "<xsl:value-of select="cog:value[2]" />"},
          {"v": "<xsl:value-of select="cog:value[3]" />"},
          {"v": "<xsl:value-of select="cog:value[4]" />"},
          {"v": "<xsl:value-of select="cog:value[5]" />"},
          {"v": "<xsl:value-of select="cog:value[6]" />"},
          {"v": <xsl:value-of select="cog:value[7]" />},
          {"v": <xsl:value-of select="cog:value[8]" />},
          {"v": <xsl:value-of select="cog:value[9]" />},
          {"v": <xsl:value-of select="cog:value[10]" />},
          {"v": "<xsl:value-of select="cog:value[11]" />"}
        ]}<xsl:if test="position() != last()">,</xsl:if>
      </xsl:for-each>
      ]
    }
  </xsl:template>
</xsl:stylesheet>

以下是用于执行转换的JavaScript代码段...

JavaScript

// create xsl processor
var xslProcessor = new XSLTProcessor();
xslProcessor.importStylesheet(sender.target.responseXML);  // responseXML = result from loading xsl file above

// perform transformation
var jsonData = xslProcessor.transformToFragment(sender.get_xml(), document).textContent;  // get_xml() = result from loading xml file above

// load google data table
dataTableSummary = new google.visualization.DataTable(jsonData);

使用这种方法，在谷歌浏览器......

加载 3.1 MB 的XML数据平均 1.1秒

加载 3.6 MB 的XML数据平均 1.4秒

包括通过XMLHttpRequest

加载XML和XSL文件的时间

单独执行转换所需的时间，3.6 MB大约需要300毫秒......

内存不足 ...

没有遇到任何问题

Javascript流解析xml

1 个答案: