使用xslt文件将xml文件转换为svg?

时间:2015-06-01 22:09:51

标签: css xml xslt svg

我需要创建一个xslt,将我的xml文件转换为svg。

无法加载所需的图片,但它基本上是一个条形图,顶部标题为" 2018年秋季注册"并且图表中每个条形的高度基于xml文件中的enrollment元素(因此它不是硬编码的)。

我一直在摆弄它,但我真的不知道该怎么做。

这是xml文件:

 <?xml version="1.0" encoding="UTF-8"?>
<courses>
  <course number="341" credits="4.0">
    <title>Data Structures</title>
    <section number="01" delivery="Classroom">
      <enrollment>15</enrollment>
      <room>EA244</room>
      <instructor>
        <first>Nicole</first>
        <last>Anderson</last>
      </instructor>
    </section>
    <section number="02" delivery="Online">
      <enrollment>10</enrollment>
      <instructor>
        <first>Nicole</first>
        <last>Anderson</last>
      </instructor>
      <instructor>
        <first>Chi-Cheng</first>
        <last>Lin</last>
      </instructor>
    </section>
    <section number="03" delivery="Classroom">
      <enrollment>12</enrollment>
      <room>SH102</room>
      <instructor>
        <first>Mark</first>
        <last>Funk</last>
      </instructor>
    </section>
  </course>
  <course number="368" credits="4.0">
      <title>Introduction to Bioinformatics</title>
    <section number="01" delivery="Classroom">
      <enrollment>9</enrollment>
      <room>AT102</room>
      <instructor>
        <first>Chi-Cheng</first>
        <last>Lin</last>
      </instructor>
      <instructor>
        <first>Mingrui</first>
        <last>Zhang</last>
      </instructor>
    </section>
  </course>
  <course number="375" credits="4.0">
      <title>Computer Systems</title>
    <section number="01" delivery="ITV">
      <enrollment>18</enrollment>
            <room>EA244</room>
      <instructor>
        <first>Chi-Cheng</first>
        <last>Lin</last>
      </instructor>
    </section>
  </course>
  <course number="385" credits="3.0">
      <title>Applied Database Management Systems</title>
    <section number="01" delivery="Classroom">
      <enrollment>26</enrollment>
            <room>ST108</room>
      <instructor>
        <first>Nicole</first>
        <last>Anderson</last>
      </instructor>
    </section>
  </course>
  <course number="413" credits="3.0">
      <title>Advanced Networking</title>
    <section number="01" delivery="Online">
      <enrollment>10</enrollment>
      <instructor>
        <first>Chi-Cheng</first>
        <last>Lin</last>
      </instructor>
    </section>
  </course>
</courses>

 这是我对xslt的尝试。

<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns="http://www.w3.org/2000/svg">

    <xsl:output indent="yes" cdata-section-elements="style"/>

    <xsl:param name="width" select="40"/><!--width of bars-->
    <xsl:param name="space" select="10"/><!--space between bars-->

    <xsl:variable name="max-y" select="//enrollment[not(//enrollement &gt; .)[1]"/>

    <xsl:template match="courses">
        <svg>
           <defs>
              <style type="text/css"><![CDATA[
                 g.bar text {
                    font-family: Arial;
                    text-anchor: middle;
                    fill: white;
                 }
                 g.bar rect {
                    fill: blue;
                 }
              ]]>   
              </style> 
           </defs>
           <g transform="translate(10,10)">
               <xsl:apply-templates select="course"/>
           </g> 
        </svg>
    </xsl:template>

    <xsl:template match="course">
        <xsl:variable name="prev-course" select="preceding-sibling::course "/>
        <g class="course" id="course-{position()}" transform="translate({
                  count($prev-course/section) * ($width + $space)
                  + count($prev-course) * $space
                  })">
        <xsl:apply-templates select="section" />
        </g>   
    </xsl:template>

    <xsl:template match="section">
        <xsl:variable name="prev-section" select="preceding-sibling::section "/>
        <g class="section" id="section-{position()}" transform="translate({
                  count($prev-section/enrollment) * ($width + $space)
                  + count($prev-section) * $space
                  })">
        <xsl:apply-templates select="enrollment" />
        </g> 
    </xsl:template>

    <xsl:template match="enrollment">
        <xsl:variable name="idx" select="count(preceding-sibling::enrollment)" />
        <xsl:variable name="pos" select="$idx * ($width + $space)" />
        <g class="bar">
           <rect x="{$pos}" y="{$max-y - .}" height="{.}" width="{$width}" />
           <text x="{$pos + $width div 2.0}" y="{$max-y - $space}">
              <xsl:value-of select="."/>
           </text>
        </g>
    </xsl:template>

</xsl:stylesheet>

1 个答案:

答案 0 :(得分:0)

<xsl:variable name="max-y" select="//enrollment[not(//enrollement &gt; .)[1]"/>行没有右括号,我想你想要<xsl:variable name="max-y" select="//enrollment[not(//enrollement &gt; .)][1]"/>

我可能会用

<xsl:variable name="max-y">
  <xsl:for-each select="//enrollment">
    <xsl:sort select="." data-type="number" order="descending"/>
    <xsl:if test="position() = 1">
      <xsl:value-of select="."/>
    </xsl:if>
  </xsl:for-each>
</xsl:variable>

然而