使用XSL創建圖表，XML

我應該使用XSL生成HTML格式的文檔，該格式從下面的XML格式化數據。使用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>

我想創建柱狀圖，其在γ-提供包含在元件<Available>包含在屬性year=""上x軸// 2007,2008,2009值，和值axis // 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>

編輯：

由於missunderstanding的讓我重寫任務。該任務聽起來像這樣：使用output.XML（上面）生成使用XSLT格式化數據的HTML文檔。可視化日期的文檔計數：例如：http://postimg.org/image/qv7co9lul/

我應該使用一些插件。

來源

2014-11-24 Prpaa

我不確定所需的輸出。目前，每張圖表中的<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，只是谷歌的「HTML圖表」。
根據圖表應該是什麼樣子，也可以使用純HTML和CSS來顯示圖表。我剛剛寫了一個帶有簡單示例標記和CSS的Fiddle，看起來像這樣，並添加了第4行以顯示背景顏色是交替的。在這種條形圖足夠的情況下，可以通過調整當前的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設置25像素的圖表中每一行的高度（佔50個文件），所以這匹配。雖然我已經建議更好地使用插件，並且這種方法僅僅是3個小節的示例（因爲我也不知道圖表是否可以包含3年以上），但我只是想表明，也可以不使用一個插件。

來源

2014-11-24 21:14:50

感謝（=「。」），現在我有我的數據，但是： – Prpaa 2014-11-24 21:33:11

但是，我現在得到的所有值都是200714720083532009443 - 或者一行中的所有值...我的圖表在哪裏？是的，我不能使用這些數字（2007,147,2008,353,2009,443），因爲我的XML是可變的（某些程序的輸出），並且下次有人使用此程序時這些值可能會有所不同。 – Prpaa 2014-11-24 21:40:52

@Prpaa對不起，那是一個誤解。我只是認爲你的XSLT會是一個例子，問題只是獲取數據。我剛剛更新了我的答案。 – 2014-11-24 22:46:47

使用XSL創建圖表，XML

回答

相關問題