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

Question

I have xml file like:

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

And I want to make SVG bar chart with values from <POWIERZCHNIA> . How to do this? I want to use it in Exist- db. Any ideas? Thanks for help.

Answer 1

You can generate SVG using XSLT, although you might find some chart library that might not require that you learn XSLT. With XSLT you select the nodes you want using XPath, and can manipulate them any way you like. You can even generate it dynamically on-the-fly in browsers (there are version limitations, though).

I wrote a tutorial about SVG chart generation using XSLT 1.0. Unfortunately it's in Portuguese and I never had the time to translate it. But I adapted your source XML and wrote a small XSLT stylesheet that will generate a simple SVG bar chart with the numbers in all POWIERZCHNIA field (not considering the nesting).

I defined some variables with fixed values for the dimensions. The $max-powierzchnia variable selects the largest value which will be used to calculate the length of the bar using the value in POWIERZCHNIA * $max-bar-length / $max-powierzchnia . The SWIAT XSL template defines the root elements of the SVG, then sorts in (by descending order of POWIERZCHNIA ) and processes all the KRAINA_GEOG nodes, which are transformed in the KRAINA_GEOG template.

This is the stylesheet:

<?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(. &lt; //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>

And this is the resulting SVG you get when you run your source XML + this XSL stylesheet through a XSLT processor: http://codepen.io/helderdarocha/pen/iJrFb

You might also try generating it on the fly, saving the XSLT stylesheet above in a file ( svg-graph.xsl ), adding a <?xml-stylesheet processing instruction to your XML:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="svg-graph.xsl"?>
<SWIAT>
    <KRAINA_GEOG TYP="Pobrzeze">
        <NAZWA>Południowobałtyckie</NAZWA>
        <POWIERZCHNIA>19000</POWIERZCHNIA>
...

And loading it in a browser such as FireFox.