Question

我有xml文件，如：

<SWIAT>
<KRAINA_GEOG TYP="Pobrzeze">
    <NAZWA>Południowobałtyckie</NAZWA>
    <POWIERZCHNIA>19000</POWIERZCHNIA>
    <OPADY_MIN>400</OPADY_MIN>
    <OPADY_MAX>800</OPADY_MAX>
</KRAINA_GEOG>
<KRAINA_GEOG TYP="Nizina">
    <NAZWA>Środkowoeuropejska</NAZWA>
    <POWIERZCHNIA>540000</POWIERZCHNIA>
    <OPADY_MIN>400</OPADY_MIN>
    <OPADY_MAX>750</OPADY_MAX>
    <KRAINA_GEOG TYP="Nizina">
        <NAZWA>Holenderska</NAZWA>
        <POWIERZCHNIA>24915</POWIERZCHNIA>
        <OPADY_MIN>550</OPADY_MIN>
        <OPADY_MAX>700</OPADY_MAX>
    </KRAINA_GEOG>
    <KRAINA_GEOG TYP="Nizina">
        <NAZWA>Południowowielkopolska</NAZWA>
        <POWIERZCHNIA>17000</POWIERZCHNIA>
        <OPADY_MIN>500</OPADY_MIN>
        <OPADY_MAX>650</OPADY_MAX>
        <KRAINA_GEOG TYP="Kotlina">
            <NAZWA>Szczercowska</NAZWA>
            <POWIERZCHNIA>1203</POWIERZCHNIA>
            <OPADY_MIN>500</OPADY_MIN>
            <OPADY_MAX>600</OPADY_MAX>
        </KRAINA_GEOG>
        <KRAINA_GEOG TYP="Rownina">
            <NAZWA>Rychwalska</NAZWA>
            <POWIERZCHNIA>1186</POWIERZCHNIA>
        </KRAINA_GEOG>
    </KRAINA_GEOG>
</KRAINA_GEOG>

我想用<POWIERZCHNIA>的值制作SVG条形图。这该怎么做？我想在Exist-db中使用它。有任何想法吗？谢谢你的帮助。

Answer 1

您可以使用XSLT生成SVG，尽管您可能会发现某些图表库可能不需要您学习XSLT。使用XSLT，您可以使用XPath选择所需的节点，并可以按照您喜欢的方式对其进行操作。您甚至可以在浏览器中动态生成它（但有版本限制）。

我写了一篇关于使用XSLT 1.0生成SVG图表的教程。不幸的是，它是葡萄牙语，我从来没有时间翻译它。但是我调整了你的源XML并编写了一个小的XSLT样式表，它将生成一个简单的SVG条形图，其中包含所有POWIERZCHNIA字段中的数字（不考虑嵌套）。

我为维度定义了一些固定值的变量。 $max-powierzchnia变量使用POWIERZCHNIA * $max-bar-length / $max-powierzchnia中的值选择将用于计算条形长度的最大值。 SWIAT XSL模板定义SVG的根元素，然后按POWIERZCHNIA的降序排序）并处理所有KRAINA_GEOG节点，这些节点在{{1}中转换} template。

这是样式表：

KRAINA_GEOG

这是通过XSLT处理器运行源XML +此XSL样式表时得到的SVG：http://codepen.io/helderdarocha/pen/iJrFb

您也可以尝试动态生成它，将上面的XSLT样式表保存在文件（<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0"> <xsl:output indent="yes"/> <xsl:variable name="svg-width" select="1200" /> <xsl:variable name="svg-height" select="900" /> <xsl:variable name="max-bar-length" select="$svg-width - 400" /> <xsl:variable name="bar-height" select="20" /> <xsl:variable name="bar-spacing" select="10" /> <xsl:variable name="bar-start" select="200" /> <xsl:variable name="max-powierzchnia" select="//POWIERZCHNIA[not(. < //POWIERZCHNIA)]" /> <xsl:template match="SWIAT"> <svg viewBox="0 0 {$svg-width} {$svg-height}" width="{$svg-width}px" height="{$svg-height}px"> <g id="bar-chart" font-size="16" transform="translate(20,100)"> <xsl:apply-templates select="//KRAINA_GEOG"> <xsl:sort order="descending" select="POWIERZCHNIA" /> </xsl:apply-templates> </g> </svg> </xsl:template> <xsl:template match="KRAINA_GEOG"> <xsl:variable name="bar-width" select="POWIERZCHNIA * $max-bar-length div $max-powierzchnia" /> <g id="bar_{position()}" transform="translate(0, {(position() - 1) * ($bar-height + $bar-spacing)})"> <text x="0" y="{($bar-height + $bar-spacing) div 2}"><xsl:number format="1. " value="position()"/> <xsl:value-of select="NAZWA"/></text> <rect x="{$bar-start}" y="0" width="{$bar-width}" height="{$bar-height}" fill="lightgray"/> <text x="{$bar-width + $bar-start + 5}" y="{($bar-height + $bar-spacing) div 2}"><xsl:value-of select="POWIERZCHNIA"/></text> </g> </xsl:template> </xsl:stylesheet>）中，向XML添加svg-graph.xsl处理指令：

<?xml-stylesheet

将其加载到FireFox等浏览器中。

如何从xml数据创建svg（用于Exist-DB）

1 个答案: