我应该生成HTML文档，使用XSL格式化下面的XML数据。
的Output.xml：
<?xml version="1.0" encoding="UTF-8"?>
<Counts>
<Dates>
<Available year="2007">147</Available>
<Available year="2008">353</Available>
<Available year="2009">443</Available>
</Dates>
</Counts>
我想创建条形图，在x轴// 2007,2008,2009上提供属性year=""中包含的值，在y轴上提供元素<Available>中包含的值// 147 ，353,443
它也应该在一张桌子里面。所以我试过这样的事情：
<?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" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<th>year</th>
</tr>
<tr>
<td>
<xsl:for-each select="Counts/Dates/Available">
<chart type="bar">
<labels>
<xsl:value-of select="@year"/>
</labels>
<data>
<xsl:value-of select="."/>
</data>
</chart>
</xsl:for-each>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
修改
因为误会让我改写任务。任务可能听起来像这样： 使用output.XML（上面）生成HTML文档，该文档使用XSLT格式化数据。可视化日期的文档计数：示例：http://postimg.org/image/qv7co9lul/
我应该使用一些插件。
答案 0 :(得分：1)
我不确定所需的输出。目前，每个图表中的<data>都是空的。但是，如果您只是将当前XSLT中的<xsl:for-each>调整为
<xsl:for-each select="Counts/Dates/Available">
<chart type="bar">
<labels>
<xsl:value-of select="@year"/>
</labels>
<data>
<xsl:value-of select="."/>
</data>
</chart>
</xsl:for-each>
输出
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>year</th>
</tr>
<tr>
<td>
<chart type="bar">
<labels>2007</labels>
<data>147</data>
</chart>
<chart type="bar">
<labels>2008</labels>
<data>353</data>
</chart>
<chart type="bar">
<labels>2009</labels>
<data>443</data>
</chart>
</td>
</tr>
</table>
</body>
</html>
Available是.中的当前节点（= xsl:for-each）。
如果所需的输出看起来不同，请将其添加到您的问题中。
更新：对于评论中添加的要求 - 要以HTML格式显示图表，它将无法获得提供的输出;相反，你需要包括例如一个jQuery插件，可以将数据显示为图表，并且根据插件，输出必须以不同的方式生成以使用插件。
你可以查看，例如http://plugins.jquery.com/?s=chart用于显示图表的不同插件，或者因为它不是jQuery，只需google for＆＃34; HTML chart＆＃34;。
根据图表的外观，还可以使用纯HTML和CSS显示图表。我刚刚写了一个Fiddle，其中包含一个简单的示例标记和CSS，它的外观如何，并添加了第四行以显示背景颜色是交替的。如果这种条形图足够，可以通过调整当前的XSLT轻松生成，不需要插件。
更新：对于已编辑的问题以及显示图表外观的链接图片 - 我还建议您使用插件，但只是为了表明它可以显示使用HTML和CSS而没有任何插件的条形图我刚刚调整了之前的Fiddle。我想图表上方的doc.count应显示所有文档的数量。以下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" indent="yes" />
<xsl:template match="Dates">
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="header">year</div>
<div class="docCount">
<xsl:value-of select="
Available[@year='2009']/
(. + sum(./preceding-sibling::*))
" />
</div>
<div class="barchart">
<div class="bar">
<div class="value">500</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">450</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">400</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">350</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">300</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">250</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">200</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">150</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">100</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">50</div>
<div class="line"></div>
</div>
<div class="bar">
<div class="value">0</div>
<div class="line"></div>
</div>
<div class="blockWrapper">
<xsl:for-each select="Available">
<xsl:variable name="count" select="." />
<div class="blockItem">
<div class="block">
<xsl:attribute name="style" select="
concat('height:', $count div 2, 'px')" />
</div>
<div class="label">
<xsl:value-of select="@year" />
</div>
</div>
</xsl:for-each>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
每个条形的高度是Available值的一半，而小提琴中的CSS为图表中的每一行设置高度为25px（代表50个文档），因此匹配。虽然我已经建议更好地使用插件，这种方法只是3个酒吧的一个例子（因为我也不知道图表是否可能超过3年），我只是想表明它＆＃39 ; s也可以不使用插件。