数字图表

• 下载样式表 - 22.5 Kb

引言

本文介绍了几种XSLT样式表，用于可视化包含在XML文件中的数值数据行（正如您可能猜到的那样）。本文解释了样式表设置的细节和模板设计的原理。

描述了以下类型图表所用的样式表

• 条形图
  • 简单型（不同行，重叠行）；
  • 堆叠型;
  • 堆叠型且归一化到100%.
• 直方图
  • 简单型（不同列，重叠列）；
  • 堆叠型;
  • 堆叠型且归一化到100%.

本文假设您熟悉XSLT 1.0，并在一定程度上熟悉CSS 1.0标准。

许多共同点

• 输入XML结构

  模板被调整为处理具有以下结构的文件

  <root>
  
    <data date="date-string">
      <first-component-name>first-component-value</first-component-name>
      <second-component-name>second-component-value</second-component-name>
    </data>
  
    <!-- And so on ... -->
  
  </root>

  或者，如果您喜欢模式

  <?xml version="1.0"?>
  
  <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
   <xs:element name="root">
    <xs:complexType>
  
     <xs:sequence maxOccurs="unbounded">
      <xs:element name="data">
  
       <xs:complexType>
        <xs:all>
         <xs:element name="a" type="xs:decimal" minOccurs="1" maxOccurs="1"/>
         <xs:element name="b" type="xs:decimal" minOccurs="1" maxOccurs="1"/>
        </xs:all>
       </xs:complexType>
  
       <xs:attribute name="date" type="xs:date" use="required"/>
  
      </xs:element>
     </xs:sequence>
  
    </xs:complexType>
   </xs:element>
  </xs:schema>

  以下示例文件用于测试所有样式表

  <?xml version="1.0"?>
  <?xml-stylesheet type="text/xsl" href="stylesheet name"?>
  <root>
  
    <data date="2006-01-01">
      <a>-1.5</a>
      <b>2.5</b>
    </data>
  
    <data date="2006-01-02">
      <a>-1.0</a>
      <b>2.0</b>
    </data>
  
    <!-- Data goes on ... -->
  
    <data date="2006-01-07">
      <a>1.5</a>
      <b>1.3</b>
    </data>
  
  </root>

• 安装

  所有模板的参数都相同

  <xsl:call-template name="template-name">
    <!-- Resolution, i.e. number of cells in a chart -->
    <xsl:with-param name="n" select="$resolution"/>
    <!-- Set of XML nodes containing the input data  -->
    <xsl:with-param name="nodeset" select="root/*"/>
    <!-- Color for the first component of a data set -->
    <xsl:with-param name="colorFirst">#008000</xsl:with-param>
    <!-- Color for the second component              -->
    <xsl:with-param name="colorSecond">#B22222</xsl:with-param>
    <!-- Color for the empty cells in a chart        -->
    <xsl:with-param name="colorEmpty">#DCDCDC</xsl:with-param> 
  </xsl:call-template>

  但是，大多数模板需要有关输入节点集的附加信息

  • 简单型和重叠型模板需要数据行(s)的每个组件的最高值和最低值。

    <!-- For example, maximum of 'a' can be calculated this way: -->
    <xsl:variable name="a_max_special">
     <xsl:for-each select="root/data">
      <xsl:sort select="a" data-type="number" order="descending"/>
      <xsl:if test="position()=1">
       <xsl:value-of select="a"/>
      </xsl:if>
     </xsl:for-each>
    </xsl:variable>
    <xsl:variable name="a_max" select="number($a_max_special)"/>

  • 堆叠型模板需要数据行(s)中最高和最低组件总和的值。

    <!-- In our case, maximum sum is calculated as follows: -->
    <xsl:variable name="sum_max_special">
     <xsl:for-each select="root/data">
      <xsl:sort select="sum(*)" data-type="number" order="descending"/>
      <xsl:if test="position()=1">
       <xsl:value-of select="sum(*)"/>
      </xsl:if>
     </xsl:for-each>
    </xsl:variable>
    <xsl:variable name="sum_max" select="number($sum_max_special)"/>

  • 归一化模板不需要任何补充数据。

  虽然您可以在模板运行时获得这些值，但“最佳计算方法是预先计算”并将值赋给相应的变量。

• 内部机制

  关于模板设计的一些说明。

  • 条形图。与条形图相关的样式表由两部分组成
    • template_name - 您通常调用的模板。这是形成图表基本表格的“外部”模板；
    • template2name（对于条形图，它可以与“外部”模板断开连接） - 内部模板，它形成实际的表格行。

    条形图是简单的HTML <TABLE>，其中<TD>填充了相应的颜色。

  • 直方图。与直方图相关的样式表由三部分组成
    • template_name - 您通常可能想要调用的模板。这是形成图表基本表格的“外部”模板；
    • template_name_col - 形成列的模板；
    • template_name_cat - 构建列内单元格的模板。

    直方图的构建稍微复杂一些：相同的旧<TABLE>具有单行和许多<TD>，每个都是数据列。每列由多个<P>标签组成，标签数量等于图表的精度。每个段落都填充了相应的颜色。

• 自定义

  一个简单的CSS块控制图表的视觉外观

  <style>
   table.bargraph // Controls bar charts
   {
    margin-top: -1px;
    padding:0;
    font-size: 15px;
    // The main controller
    // of the barchart's cell size
   }
  
   table.bargraph td.date // Controls 'date' column
   {
    width: 75px;
    text-align:left;
   }
  
   table.histogram td     // Controls histograms
   {
    width: 5px;
    font-size: 1px;
    padding-top: 10px;
   }
  
   table.histogram td p   // Controls histogram cells
   {
    width: 20px;          // Width...
    height: 3px;          // ...and height of a cell.
    line-height: 0;
    margin: 0 1px 1px 0;
    padding: 0;
    font-size: 1px;
   }
  </style>

• 限制
  • 首先可见的难题是每次可以处理的数据集中组件的数量。简单型和重叠型表格可以立即扩展到任意数量的组件；扩展其他表格会带来一些问题，尽管不应该花费太多时间。
  • 另一个问题是样式表的复杂性。虽然简单型、重叠型和归一化模板相当简单，但堆叠型图表是重量级的。

Charts

在随附的存档中，您将找到以下样式表

• 条形图。
  • Bar-simple - 不同行（每单个日期2行）。

    最简单的图表：按日期比较组件。

    

  • Bar-overlaid - 重叠行。

    与前者几乎相同，但每个日期只显示一行 - 组件相互重叠。

    

  • Bar-stacked - 堆叠条形图。

    显示各个项目对总和的贡献。

    

  • Bar-normalized - 堆叠且100%归一化的条形图。

    显示单个项目对总值的贡献百分比。

    

• 直方图。
  • Hist-simple - 不同列（每单个日期2列）。

    

  • Hist-overlaid - 重叠列。

    

    注意：严格来说，这和接下来的两个图表不能称为直方图；然而，我将使用MS Excel的术语，它将所有“水平”图表称为条形图，将所有“垂直”图表称为直方图（或柱状图）。

  • Hist-stacked - 堆叠柱状图。

    

  • Hist-normalized - 堆叠且100%归一化的柱状图。

    

历史

• 2006年2月7日 - 模板集的第一个版本；仅正值。
• 2006年4月6日 - 第二个版本；任意范围的值。
• 2006年4月25日 - 第三个版本。添加了数据文件模式；条形图样式表已优化（与之前的版本相比，生成的HTML大小缩小了约22%）。