Question

我应该生成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/

我应该使用一些插件。

Answer 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也可以不使用插件。

使用XSL，XML创建图表

1 个答案: