使用通用对象创建 SVG 图表

• 下载源文件 - 116.67 KB

引言

本文档旨在说明如何制作一些有趣的图表，例如饼图、甜甜圈图、直方图和线性图来表示数据。下面的图片是它们外观的示例。

我的项目包含两个库，用于创建这些图表。第一个库（SVGObjects）包含创建格式良好的 SVG 文档所需的一些常用 SVG 对象。当然，如有需要可以添加更多。我们将使用第二个库（Charts）来格式化图表。请注意，我们只有一种输入数据进行转换的方式，那就是使用 DataTable。当然，我们可以修改项目，添加更多接口以接受包含数据（如 Hashtable 或 XmlNode）的其他类型对象。

背景

Charts 是一个分层类库。用于创建这些图表的所有类都具有 GenerateChart 方法。调用此方法只需将图表数据作为 DataTable 对象传入，该对象包含两列：一列是字符串形式的图表标签，另一列是双精度浮点数形式的图表值。

有一些有趣的功能

1. 使用引导线
   我们可以设置 WithGuideLines 属性，以便在 AxisChart 的任何类中创建四条引导线，以便更好地理解数据表示。 
2. 分割图例
   在某些情况下，使用线性图时，我们可能需要将图例分割成一定数量的项。这通常发生在 DataTable 中有很多行时。为了减少这些项的数量，在创建对象时，我们必须传入所需使用的项数。
3. 背景颜色
   在继承自 AxisChart 的图表中，有一个 BackgroundColor 属性，可以根据需要设置图表的背景颜色。
4. 随机颜色
   根据 Datatable 的行数，系统会为图例和图表获取颜色。

Using the Code

使用 Chart 库创建图表非常容易。我们只需实例化所需的图表类（例如 PieChart）的对象，并将以下参数传递给构造函数：宽度、高度以及图例项的数量（如果需要）。之后，我们必须调用 GenerateChart 方法，并保存它提供的 XmlDocument。

创建饼图

DataTable tbValues = GetData();
PieChart chees = new PieChart(300, 200, tbValues.Rows.Count);
XmlDocument xml = chees.GenerateChart(tbValues, "name", "value");
SaveDocument(xml);

您可以使用 Pie3DChart 对象来创建三维饼图。

创建甜甜圈图

DataTable tbValues = GetData();
DoughnutChart doug = new DoughnutChart(300, 200, tbValues.Rows.Count);
XmlDocument xml = doug.GenerateChart(tbValues, "name", "value");
SaveDocument(xml);

您可以使用 Histogram3DChart 对象来创建三维甜甜圈图。

创建直方图

DataTable tbValues = GetData();
HistogramChart hist = new HistogramChart(300, 200, tbValues.Rows.Count);
XmlDocument xml = hist.GenerateChart(tbValues, "name", "value");
SaveDocument(xml);

您可以使用 Histogram3DChart 对象来创建三维直方图。

创建线性图

DataTable tbValues = GetData();
LinearChart line = new LinearChart(300, 200, tbValues.Rows.Count);
XmlDocument xml = line.GenerateChart(tbValues, "name", "value");
SaveDocument(xml);

SVGObjects 库使用的对象包含制作图表的主要属性。在某些情况下，属性名称与其所代表的 SVG 元素的名称不同，并且其中一些属性被省略了。这是为了简化对象创建。为了解决这个问题，Charts 库需要将这些对象转换为格式良好的 SVG 文档。
为此，该库使用 XSLT 模板。

转换为格式良好的 SVG 文档

protected XmlDocument Transform()
{
    XmlDocument xmlResult = new XmlDocument();
    XslCompiledTransform xslt = new XslCompiledTransform();
    xslt.Load(AppDomain.CurrentDomain.BaseDirectory + @"\Charts.xslt");
    XPathNavigator nav = this.Doc.ToXml().CreateNavigator();
    StringBuilder sw = new StringBuilder();
    XmlWriter xr = XmlWriter.Create(sw, null);
    xslt.Transform(nav, xr);
    xmlResult.LoadXml(sw.ToString());
    return xmlResult;
}

使用 SVG 文档

我们可以通过使用 object、embed 或 iframe 标签在 HTML 文档中使用 SVG 文档。这些标签之间存在一些差异，让我们快速看一下。
主要区别在于客户端使用的浏览器和文档是用 HTML 的哪个版本编写的。因此，如果我们想编写 XHTML 文档，就不能使用 embed 标签，因为它不受支持。iframe 标签在大多数浏览器中都有效。

尽管 SVG 是一种标准，目前在大多数浏览器中都得到原生支持，但 IE 不支持。IE 通过使用 Adobe 开发的 SVG Viewer 插件来实现。这很可惜，因为 Adobe 在 2009 年初宣布不再支持该插件。我猜 Silverlight 有一定的责任。

<embed src="histogram.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
 
<object data="histogram.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
 
<iframe src="histogram.svg" width="300" height="100">
</iframe>

历史

• 2009 年 11 月 4 日：初稿
• 2010 年 5 月 28 日：甜甜圈图
• 2010 年 6 月 22 日：三维图表