使用 XSLT 从 XML 创建 SVG 条形图答案

【问题标题】：Create SVG bar charts from XML with XSLT使用 XSLT 从 XML 创建 SVG 条形图
【发布时间】：2013-12-06 03:12:41
【问题描述】：

我正在使用 XSLT 将 XML 转换为 SVG。我想创建水平条形图，左侧有一个值，右侧有一个条形图值。 XML 如下所示：

<value1 name="something">
  <value2>13</value2>
</value1>
<value1 name="something else">
  <value2>45</value2>
</value1>

这就是我到目前为止所得到的，从 value2 创建水平条形图。

<xsl:template match="/" mode="svg">
    <svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg">
      <g id="bar" transform="translate(50,50) rotate(90 90 90)">
        <xsl:for-each select=".../value1">
        <xsl:variable name="val" select="value2"/>
      <rect x="{position()*25}" y="-{$val*1.5}" height="{$val*1.5}" width="15" style="fill:{@fill};"/>
      <text x="{position()*25 + 7.5}" y="0" style="font-family:arial;text-anchor:middle;baseline-shift:-15;">
      </text>
    </xsl:for-each>
  </g>
</svg>

我遇到的问题是将文本和图表放在一起。我想错了吗？我希望输出看起来像这样：

value1     bar chart  value2
value1     longer bar chart  value2

我真的被困住了，所以感谢任何帮助！

【问题讨论】：

不清楚您的问题是关于设计正确的 SVG 以显示条形图还是关于使用 XSLT 从您的输入创建特定 SVG。所以请澄清一下，如果您知道要为 XML 输入创建的 SVG，然后发布该 SVG，我们可以帮助编写 XSLT 来创建它。
我同意 Martin 的观点，您的问题至少涉及两个学科领域。针对您的这两个挑战，我已经做了很多工作，这是一个相当大的问题陈述，很难创建一种防弹、灵活、模块化的方式来消化 XML 数据，然后在适应高度多样化的同时创建有吸引力的结果输入、“坏数据”、自动量程等。祝你好运，安娜！鉴于您所问的范围很广，我无法更具体地发表评论。
我猜你的问题是正确地将文本与栏对齐。最好先手动编译一个 SVG，然后给我们一个完整的 XML 源文件、一个完整的 XSLT 和所需的输出。如果有子问题，最好将它们作为单独的问题提出。

标签： xml xslt svg