SPGraphviz：SharePoint 中的图表可视化

• 下载源代码 - 11.4 KB
• 下载源代码变更集 - 24.52 KB

引言

几天前，SPGraphviz 项目在 Codeplex 上发布 http://spgraphviz.codeplex.com。使用 SPGraphviz，您可以创建自己的图、架构、图形图表等，并在 SharePoint 中显示它们，无需编程和外部应用程序。您可以制作组织架构图、门户层级图、文件版本历史图、逆向工程图等。（应用用例仅受限于您的想象力）。以下是您可以创建的图的示例（来自 Graphviz 库）

背景

SPGraphviz 基于 AT&T 公司多年前开发的开源图渲染库 Graphviz 实现。它是一个 C 库，SPGraphviz 使用 David Brown 的 托管包装器（稍作修改）来调用本地函数。图使用标准的 .txt 文件，通过 DOT 语言定义。这是一种特定的 DSL，允许定义图的结构（节点、关系、标题）和布局（颜色、大小、方向等）。DOT 是一种非常丰富的语言，但对于简单的解决方案，您不需要深入研究它。例如，看看下面的图

这展示了一个示例，说明了如何使用 SPGraphviz 来显示门户层级结构。我们有一个根站点，部门的子站点（或子站点集合），下面有三个部门站点：IT、HR、Sales。还有一个个人站点的子站点集合，用户可以在其下创建自己的站点（类似于 MySites）。此图可以使用以下 DOT 定义创建

digraph example {
        size="6,6";
        node [color=lightblue2, style=filled];
        "Start page" -> "Departments";
        "Start page" -> "News";
        "Start page" -> "Personal sites";
        "Departments" -> "IT";
        "Departments" -> "HR";
        "Departments" -> "Sales";
        "Personal sites" -> "Alexey Sadomov";
        "Personal sites" -> "...";
}

在这里，我们定义了一个有向图（digraph 示例 {}），并在其中指定了节点以及它们之间的关系

"Start page" –> "Departments";

此外，我们还指定了一些布局设置：图像大小（size=”6,6”）以及节点颜色和填充样式（node [color=lightblue2, style=filled]）。我认为这个例子很容易理解，您可以将其作为开始使用 SPGraphviz 的起点。

安装

那么 SPGraphviz 如何在 SharePoint 中使用？它包含一个名为 SPGraphvizWebPart 的特殊 Web 部件，可以根据文本文件中的 DOT 定义渲染图。首先，您需要在服务器上安装 SPGraphviz 。它以标准的 wsp 包形式发布。您需要按照 http://spgraphviz.codeplex.com/documentation 中的说明进行安装

1. 下载并安装 Graphviz 库（选择 Download > Windows > Stable and development Windows Install packages）到 Web 服务器上。安装过程中，请确保在第一个向导步骤中选中“Everyone”（所有人）
2. 下载 SPGraphviz 的最新版本。目前，该版本包含标准的 wsp 包。
3. 将 SPGraphvizWebPart.wsp 安装到您的服务器上。以下是单 Web 前端（WFE）环境的步骤

stsadm -o addsolution -filename SPGraphvizWebPart.wsp
stsadm -o deploysolution -local -allowgac -allcontenturls -name SPGraphvizWebPart.wsp
stsadm -o activatefeature -name SPGraphvizWebPart -url http://example.com

请注意，为了使用 SPGraphviz，您还需要在 Web 服务器上安装 Graphviz 。假设您已安装所有必需的组件。现在您可以使用 DOT 语言定义您的图，并在发布页面上使用 SPGraphvizWebPart 显示它。

用例

为了我们的示例，我们使用上面显示的 DOT 定义。为了在 SharePoint 中显示图，您需要将包含 DOT 定义的文本文件上传到您网站集中的某个文档库中。然后，转到某个发布页面，并在页面上添加 SPGraphvizWebPart （它应该位于 Web 部件列表的 Graphviz 组下）。您需要执行的最后一步是转到 Web 部件属性（修改共享 Web 部件），并在“Dot file URL”属性（位于 Web 部件属性编辑器中的“Custom settings”类别下）中指定您上传文件的绝对 URL，然后点击 Apply（对可以用作 DOT 定义存储位置的主机有限制。默认情况下，您只能使用 SPGraphvizWebPart 安装的同一主机。有关如何使用外部主机存储 DOT 定义的说明，请参见 http://spgraphviz.codeplex.com/documentation）。之后，您应该会看到基于文本定义的图的图形表示

我描述了在 SharePoint 中创建非编程图的用例。但 SPGraphviz 也为开发人员带来了巨大的机会。请注意，图的定义是以文本形式制作的。这意味着开发人员可以实现自定义代码，根据某些数据自动创建此类 DOT 定义，然后设置 SPGraphvizWebPart 来显示此定义。例如，以下示例可用于可视化门户层级结构

class Program
{
    static void Main(string[] args)
    {
        if (args.Length != 1)
        {
            Console.WriteLine("Usage: GraphBuilder.exe [url]");
            return;
        }

        Console.WriteLine("digraph sites {");
        Console.WriteLine("node [color=lightblue2, style=filled];");

        using (var site = new SPSite(args[0]))
        {
            using (var web = site.OpenWeb())
            {
                foreach (SPWeb subWeb in web.Webs)
                {
                    iterateSubWebs(subWeb, web.Title);
                }
            }
        }
        Console.WriteLine("}");
    }

    private static void iterateSubWebs(SPWeb web, string parentNode)
    {
        Console.WriteLine("\"{0}\" -> \"{1}\";", parentNode, web.Title);

        foreach (SPWeb subWeb in web.Webs)
        {
            iterateSubWebs(subWeb, web.Title);
        }
    }
}

该程序非常简单——它递归地遍历所有站点，并将相应的节点添加到结果 DOT 定义中。要获得图，您需要运行此程序并将输出重定向到文件

GraphBuilder.exe http://example.com > graph.txt

这是在该站点上运行此程序的示例，该站点使用 OTB Collaboration Portal 网站模板创建

正如您所见，使用 SPGraphviz 可以实现许多有趣的用例。我希望通过这个项目，您的 SharePoint 网站将更具吸引力，并让您的客户满意。敬请关注，并分享您在实际中使用 SPGraphviz 的想法。正如另一个开源项目 Camlex.NET 一样，我始终欢迎您的反馈，并希望它在您使用 SharePoint 的工作中有所帮助。

下载链接

您可以从 Codeproject（源代码）或从 http://spgraphviz.codeplex.com 下载 SPGraphviz 。

额外资源

• 作者博客 http://sadomovalex.blogspot.com
• 有关 SPGraphvizWebPart 功能的更多详细信息，请参阅 http://spgraphviz.codeplex.com/documentation
• DOT 语言参考：https://graphviz.cn/pdf/dotguide.pdf
• Graphviz：https://graphviz.cn

历史

• 2010 年 10 月 13 日：初始版本