Как максимизировать бары на графике SVG

Question

У меня есть документ XML с данными, которые я хотел бы отобразить на графике SVG с использованием XSL.Диаграмма видна, но отдельные столбцы не заполняют ширину графика и почти видны на оси 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>

А вот мой код 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), и поэтому они едва видны?

Заранее спасибо

Answer 1

Вот самый простой способ получить бары:

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>

XSLT 1.0

<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>

Предоставлено

Примечаниеумножение значения $ max на предполагаемую высоту сечения стержня.Без этого расчет вернул бы только отношение текущего значения к максимальному значению.