时间戳

首页 > 解决方案 > 如何最大化 SVG 图表中的条形

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>

这是我的 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)，因此它们几乎不可见？

提前致谢

标签： xmlxsltsvg

解决方案

这是我能想到的最简单的获取酒吧的方法：

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 值乘以条形部分的预期高度。如果没有这个，计算将只返回当前值与最大值的比率。

推荐阅读