使用XSLT条形图

时间:2017-03-31 19:12:54

标签: xslt svg

您好,我一直在制作条形图。这需要xml代码并将其转换为svg条形图。我已经用正常的方式制作了数据,并提出了问题'沿x轴运行,数据沿y轴向上运行。我希望条形图显示沿y轴向上的问题,然后显示沿x轴的数据。我不确定该怎么做。

 <?xml version="1.0"?>
 <?xml-stylesheet type='text/xsl' href='mytransformation.xslt' 
 ?>

  <Survey>

  <Questions>
      <Number>1</Number>
      <Question>Is there free circulation of air through and about the building in which you work?</Question>
      <Comment>&quot;One says where she is employed there are 100 women and small girls who work in a cellar without ventilation, and gas and electric lights burning all day.&quot;</Comment>
      <Yes>468</Yes>
      <No>249</No>
      <Blank>93</Blank>
     </Questions>

      <Questions>
      <Number>2</Number>
      <Question>Are there offensive odors in the rooms occupied by employees; if so, from what causes?</Question>
      <Comment>&quot;Eighty-one from water-closets and seventy-three from various other causes.&quot;</Comment>
      <Yes>342</Yes>
      <No>233</No>
      <Blank>235</Blank>
      </Questions>



<Questions>

   <Number>3</Number>
      <Question>Are there facilities for washing?</Question>
      <Comment>Fourteen answered yes, but if caught washing are fined.</Comment>
      <Yes>460</Yes>
      <No>124</No>
      <Blank>226</Blank>
     </Questions> 

     <Questions>
    <Number>4</Number>
      <Question>Are seats provided, as prescribed by law?</Question>
      <Yes>320</Yes>
      <No>192</No>
      <Blank>298</Blank>
       </Questions>


  </Survey>

这是xslt代码。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
        <html>
            <body>
            <xsl:apply-templates/>


            </body>
        </html>

    </xsl:template>
    <xsl:template match="/">
        <svg width="1000" height="1500">
            <text id="title" x="500" y="50px" text-anchor="middle" style="fill:rgb(0,0,0);font-size:20;">SANITARY CONDITIONS OF WORKSHOPS AND FACTORIES</text>  
            <text id="50percentlabel" x="45" y="260" text-anchor="end">50%</text>
            <text id="1000percentlabel" x="45" y="70" text-anchor="end">100%</text>
            <text id="legendlabel" x="750" y="200">Legend: Survey Responses</text>
            <rect height="20" width="50" x="750" y="220" fill="blue"/>
            <text id="legend" x="810" y="235">Blank</text>
            <rect height="20" width="50" x="750" y="250" fill="red"/>
            <text id="legend" x="810" y="265">No</text>
            <rect height="20" width="50" x="750" y="280" fill="black"/>
            <text id="legend" x="810" y="295">Yes</text>
            <line id="xaxis" x1="50" y1="450" x2="700" y2="450" style="stroke:rgb(0,0,0);"/>
            <line id="yaxis" x1="50" y1="70" x2="50" y2="450" style="stroke:rgb(0,0,0);"/>
            <xsl:for-each select="Survey/Questions">
            <xsl:sort select="No" order="descending"/>
            <xsl:if test="Yes">

                <g>
                <rect height="{(Blank div (Yes + No + Blank))*380}" width="25" x="{10+ (position()*50)}" y="70" fill="blue"/>


                </g>

                <g>


                <rect height="{(No div (Yes + No + Blank))*380}" width="25" x="{10+ (position()*50)}" y="{70+(Blank div (Yes + No + Blank))*380}" fill="red"/>


                </g>


                <g>

                <rect height="{(Yes div (Yes + No + Blank))*380}" width="25" x="{10+ (position()*50)}" y="{70+((Blank + No) div (Yes + No + Blank))*380}" fill="black"/>

                </g>
                <text id="Question" x="{15+ (position()*50)}" y="455" style="writing-mode: tb; glyph-orientation-vertical: 0;" >Q<xsl:number value="position()"/>:&#160;<xsl:value-of select="Question"/></text>

                </xsl:if>
            </xsl:for-each>
        </svg>
    </xsl:template>


</xsl:stylesheet>

0 个答案:

没有答案