Xml 如何最大化SVG图表中的条形图

我有一个XML文档，其中包含我想使用XSL在SVG图形中绘制的数据。图表是可见的，但单个条形图没有填满图表的宽度，只是在Y轴上几乎可见。（见下文）

如何获得条形图的宽度以填充图表的长度

当前，条形图宽度是根据XML文档中的相应值指定的

以下是我的XML代码：

<xml>
<graph2>
    <averageLowTemperatures>
        <January>3.7</January>
        <February>3.4</February>
        <March>5.0</March>
        <April>6.4</April>
        <May>9.4</May>
        <June>12.3</June>
        <July>14.6</July>
        <August>14.7</August>
        <September>12.5</September>
        <October>9.6</October>
        <November>6.2</November>
        <December>4.7</December>
    </averageLowTemperatures>    
</graph2>

3.7
3.4
5
6.4
9.4
12.3
14.6
14.7
12.5
9.6
6.2
4.7

下面是我的XSL代码：

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

    <svg xmlns="http://www.w3.org/2000/svg">
        <g id="axis" transform="translate(0 500) scale(1 -1)">
            <!--Y Axis line-->
            <line id="axis-y" x1="30" y1="20" x2="30" y2="510" style="stroke:rgb(0,0,0);stroke-width:2"/>
            <!--X Axis line-->
            <line id="axis-x" x1="30" y1="20" x2="700" y2="20"  style="fill:none;stroke:rgb(0,0,0);stroke-width:2"/>
        </g>

        <xsl:for-each select="xml/graph2/averageLowTemperatures">
            <g>
                <rect x="31" y="5" width="{January div $max}" height="35" id="Jan"/>
                <rect x="31" y="45" width="{February div $max}" height="35" id="Feb"/>
                <rect x="31" y="85" width="{March div $max}" height="35" id="Mar"/>
                <rect x="31" y="125" width="{April div $max}" height="35" id="Apr"/>
                <rect x="31" y="165" width="{May div $max}" height="35" id="May"/>
                <rect x="31" y="205" width="{June div $max}" height="35" id="Jun"/>
                <rect x="31" y="245" width="{July div $max}" height="35" id="Jul"/>
                <rect x="31" y="285" width="{August div $max}" height="35" id="Aug"/>
                <rect x="31" y="325" width="{September div $max}" height="35" id="Sep"/>
                <rect x="31" y="365" width="{October div $max}" height="35" id="Oct"/>
                <rect x="31" y="405" width="{November div $max}" height="35" id="Nov"/>
                <rect x="31" y="445" width="{December div $max}" height="33" id="Dec"/>

            </g> 
        </xsl:for-each>
    </svg>

这个问题是因为SVG图形宽度（700）远大于条形图（14.7）的值，因此它们几乎不可见而引起的吗

---

提前感谢

以下是我能想到的获得酒吧的最简单方法：

XML

<xml>
    <graph2>
        <averageLowTemperatures>
            <January>3.7</January>
            <February>3.4</February>
            <March>5.0</March>
            <April>6.4</April>
            <May>9.4</May>
            <June>12.3</June>
            <July>14.6</July>
            <August>14.7</August>
            <September>12.5</September>
            <October>9.6</October>
            <November>6.2</November>
            <December>4.7</December>
        </averageLowTemperatures>    
    </graph2>
</xml>

请注意，$max值乘以条形截面的预期高度。如果没有这个，计算将只返回当前值与最大值的比率。
看看这是否有帮助：还有这个：@michael.hor257k我最初使用这些示例生成了一个垂直条形图，显示得非常完美，但我现在不确定是什么原因导致了我的问题，有任何提示吗？除非您发布一个可复制的示例-请参阅：。@michael.hor257k问题中提供的代码是否不满足可复制的示例？缺少的只是XSL文档中的“”以及XML中指向它的链接。抱歉，这里还很新
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/2000/svg">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/xml">
    <xsl:variable name="temperatures" select="graph2/averageLowTemperatures/*" />
    <xsl:variable name="max">
        <xsl:for-each select="$temperatures">
            <xsl:sort select="." data-type="number" order="descending"/>
            <xsl:if test="position()=1">
                <xsl:value-of select="."/>
            </xsl:if>
        </xsl:for-each>
    </xsl:variable>
    <svg>
        <g id="bars" transform="translate(0, 500) scale(1 -1)">
            <xsl:for-each select="$temperatures">
                <rect x="{40 * position()}" width="30" height="{. div $max * 500}"/>
            </xsl:for-each>
        </g>
    </svg>
</xsl:template>

</xsl:stylesheet>

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <g id="bars" transform="translate(0, 600) scale(1 -1)">
    <rect x="40" width="30" height="125.850340136054"/>
    <rect x="80" width="30" height="115.646258503401"/>
    <rect x="120" width="30" height="170.068027210884"/>
    <rect x="160" width="30" height="217.687074829932"/>
    <rect x="200" width="30" height="319.727891156463"/>
    <rect x="240" width="30" height="418.367346938776"/>
    <rect x="280" width="30" height="496.598639455782"/>
    <rect x="320" width="30" height="500"/>
    <rect x="360" width="30" height="425.170068027211"/>
    <rect x="400" width="30" height="326.530612244898"/>
    <rect x="440" width="30" height="210.884353741497"/>
    <rect x="480" width="30" height="159.863945578231"/>
  </g>
</svg>