使用XML和XSL创建SVG折线图 [英] Create SVG Polyline Graph Using XML and XSL
问题描述
我正在尝试从XML文档中的值创建SVG折线图.到目前为止,我已经制作了图表,但是我无法正确地从XML文档中检索值.以下是图表的当前状态:
I am trying to create a SVG polyline graph from values within my XML doc. So far I have produced the chart but I am unable to correctly retrieve the values from the XML doc. Below is the current state of the graph:
该图旨在显示每月的平均天气温度,因此其边缘应较低,而中心应为峰值.
The graph is intended to display average monthly weather temperatures so should therefore be lower at the edges and a peak in the centre.
这是我的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,但我不确定在绘制点时如何正确使用变量.
I assume that the XSL for each loop at the bottom is the source of the issue but I am unsure how to use the variable correctly when plotting the points.
预先感谢
推荐答案
在SVG图表中,0,0
位于左上方.较小的Y值将在顶部绘制,而较大的Y值将向底部移动.
In an SVG chart, 0,0
is at the top left. Smaller Y values will plot at the top, and larger Y values will move towards the bottom.
因此,对于您的温度线,最高温度应为Y轴的最低编号.您可以将温度值除以最大值,然后乘以100,然后从图表高度中减去该值.由于您有stroke-width
,所以最高编号的行可能会被截断,因此您可能需要在计算值时考虑到这一点.
So, for your temperature line, the highest temperature should have the lowest number for the Y axis. You could divide the temperature value by the maximum and then multiple by 100, and then subtract that from the height of the chart. Since you have a stroke-width
, the line for the highest numbers might get cut off, so you might want to account for that in the calculation of the values.
这就是我生成您的折线图的方式:
This is how I would generate your linechart:
<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>
这篇关于使用XML和XSL创建SVG折线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!