使用 XML 和 XSL 创建 SVG 折线图答案

【问题标题】：Create SVG Polyline Graph Using XML and XSL使用 XML 和 XSL 创建 SVG 折线图
【发布时间】：2019-06-19 16:22:58
【问题描述】：

我正在尝试从我的 XML 文档中的值创建一个 SVG 折线图。到目前为止，我已经制作了图表，但我无法从 XML 文档中正确检索值。下面是图表的当前状态：

该图表旨在显示每月平均天气温度，因此应在边缘较低而在中心达到峰值。

这是我的 XML 代码：

<xml>
<graph2>
    <averageHighTemperatures>
        <January>8.3</January>
        <February>8.5</February>
        <March>11.1</March>
        <April>13.5</April>
        <May>17.1</May>
        <June>20.0</June>
        <July>22.6</July>
        <August>22.5</August>
        <September>19.3</September>
        <October>15.3</October>
        <November>11.2</November>
        <December>9.1</December>
    </averageHighTemperatures>
</graph2>
</xml>

这是我的 XSL 代码：

<svg xmlns="http://www.w3.org/2000/svg" 
         viewBox="0 0 500 100" class="chart">

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

        <xsl:for-each select="xml/graph2/averageHighTemperatures">
            <polyline
                fill="none"
                stroke="#0074d9"
                stroke-width="3"
                points="0,{January div $max}
                        20,{February div $max}
                        40,{March div $max}
                        60,{April div $max}
                        80,{May div $max}
                        100,{June div $max}
                        120,{July div $max}
                        140,{August div $max}
                        160,{September div $max}
                        180,{October div $max}
                        200,{November div $max}
                        220,{December div $max}"/>

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

我假设底部每个循环的 XSL 是问题的根源，但我不确定在绘制点时如何正确使用该变量。

提前致谢

【问题讨论】：

您的问题是关于 XSLT 还是关于 SVG？ IOW，您确切知道生成的 SVG 代码应该是什么吗？
@michael.hor257k 我不确定 SVG 代码，但它应该看起来像这样：'points="0,100 20,90 40,80 60,70 80,50 100,40 120, 20 140,25 160,30 180,50 200,70 220,90"' 我认为问题是尝试使用 XSL 收集 XML
我认为您有很多问题，不可能一次全部回答。我建议您首先找出确切 XSL 转换的结果应该是什么。不仅仅是点值，还有 SVG 代码中的一切。然后 - 而不是之前 - 询问如何通过 XSLT 产生所需的结果。

标签： xml xslt svg

【解决方案1】：

在 SVG 图表中，0,0 位于左上角。较小的 Y 值将绘制在顶部，较大的 Y 值将向底部移动。

因此，对于您的温度线，最高温度的 Y 轴数字应该最小。您可以将温度值除以最大值，然后乘以 100，然后从图表的高度中减去它。由于您有 stroke-width，因此最高数字的行可能会被截断，因此您可能需要在计算值时考虑到这一点。

这就是我生成折线图的方式：

<xsl:variable name="stroke-width" select="3"/>
<xsl:variable name="max" select="max(xml/graph2/averageHighTemperatures/*)"/>
<xsl:variable name="box-height" select="100"/>  
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 {$box-height}" class="chart">
  <polyline
    fill="none"
    stroke="#0074d9"
    stroke-width="{$stroke-width}" >
    <xsl:attribute name="points">
      <xsl:for-each select="xml/graph2/averageHighTemperatures/*">
        <xsl:value-of select="20 * (position() - 1)"/>
        <xsl:text>,</xsl:text>
        <xsl:value-of select="$box-height - ((. div ($max + $stroke-width) ) * 100)"/>
        <xsl:text> </xsl:text>
      </xsl:for-each>
    </xsl:attribute>
  </polyline>
</svg>

呈现为：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 100" class="chart">
    <polyline fill="none"
              stroke="#0074d9"
              stroke-width="3"
              points="0,67.578125 20,66.796875 40,56.64062500000001 60,47.265625 80,33.203125 100,21.875 120,11.71875 140,12.109375 160,24.609375 180,40.234375 200,56.25000000000001 220,64.453125 "/>
</svg>

【讨论】：