如何使用 SVG 和 XSL 制作折线图答案

【问题标题】：How can I do a line charts with SVG and XSL如何使用 SVG 和 XSL 制作折线图
【发布时间】：2017-03-29 07:07:21
【问题描述】：

我想用 SVG 制作折线图。我有一个 bug.xml，我想用一个 bug.xsl 显示它并使用 SVG 来制作折线图。我已经设法做到了，但我不能使用变量来输入坐标。我在谷歌上搜索它，但我不知道怎么做。这是我的 .xml ：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet href="bug.xsl" type="text/xsl"?>

<root text="Récapitulatif des bugs MD 360">
<graph>
            <item text="3988 (K2) : [MozillaMD] Plantage vidÃ©o de localisation prise OB" severite="K2" importance="" status="" date="15/11/2016"/>
            <item text="3987 (K2) : [MozillaMD] Plantage vidÃ©o de localisation pris" severite="K3" importance="" status="" date="15/11/2016"/>
            <item text="3989 (K2) : [MozillaMD] Plantage vidÃ©o de localisationD" severite="K2" importance="" status="" date="15/11/2016"/>
            <item text="3985 (K2) : [MozillaMD] Plantage vidÃ©o de localisati" severite="K1" importance="" status="" date="15/11/2016"/>
            <item text="3978 (K2) : [MozillaMD] Plantage vidÃ©o de D" severite="K1" importance="" status="" date="15/11/2016"/>
            <item text="3982 (K2) : [MozillaMD] Plantage vidÃ©D" severite="K4" importance="" status="" date="15/11/2016"/>
            <item text="3955 (K2) : [MozillaMD] Plantage vidÃ©o deD" severite="K4" importance="" status="" date="15/11/2016"/>
            <item text="3976 (K2) : [MozillaMD] PlantagD" severite="K1" importance="" status="" date="15/11/2016"/>
            <item text="3963 (K2) : [MozillaMD] Plantage vidÃ©o de " severite="K3" importance="" status="" date="15/11/2016"/>
            <item text="3896 (K2) : [MozillaMD] Plantage vi" severite="K2" importance="" status="" date="15/11/2016"/>
            <item text="3923 (K2) : [MozillaMD] Plantage " severite="K2" importance="" status="" date="15/11/2016"/>
</graph>
</root>

这是我的实际 .xsl，当我将 $var3 替换为 0 时，它可以工作，但不能使用 $var3，我做错了什么？

<?xml version="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"
  indent="yes"
  standalone="no"
  doctype-public="-//W3C//DTD SVG 1.1//EN"
  doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
  media-type="image/svg" />

<xsl:template match="graph">
<svg viewBox="0 0 500 100" class="chart">
 <xsl:variable name= "var3"><xsl:value-of select="count(graph/item[severite='K2'])"/></xsl:variable>    
<polyline
 fill="none"
 stroke="#0074d9"
 stroke-width="3"
 points="
   $var3,120
   20,60
   40,80
   60,20"/>
</svg>
</xsl:template>
</xsl:stylesheet>

【问题讨论】：

标签： html xml xslt svg

【解决方案1】：

使用形式的属性值模板

<polyline
 fill="none"
 stroke="#0074d9"
 stroke-width="3"
 points="
   {$var3},120
   20,60
   40,80
   60,20"/>

【讨论】：

天啊。谢谢。 :)