如何使用.NET DataTable从谷歌图表工具/虚拟化应用编程接口创建组织结构图？

Question

我想创建一个组织结构图，如下所示：http://code.google.com/apis/visualization/documentation/gallery/orgchart.html

我可以从这里使用.NET可视化助手库创建JSON google.visualization.DataTable字符串：http://code.google.com/p/bortosky-google-visualization/

不幸的是，使用这个助手库，不可能为每个组织结构图成员显示像总裁或副总裁这样的自定义格式消息，因为f: key不是由助手库生成的。

Answer 1

我能够通过编写一个从C# DataTable创建组织结构图JSON的方法来解决这个问题：

public string GoogleOrgChartJson(DataTable dt)
        {
            if ((dt == null) || (dt.Columns.Count == 0)) return "";
            var sb = new StringBuilder();
            sb.Append("{cols: [");
            foreach (DataColumn dc in dt.Columns.Cast<DataColumn>().Where(dc => dc.Caption != "Format"))
            {
                sb.Append("{id: '");
                sb.Append(dc.Caption);
                sb.Append("', label: '");
                sb.Append(dc.Caption);
                sb.Append("', type: '");
                sb.Append(dc.DataType.Name.ToLower());
                sb.Append("'}, ");
            }
            sb.Remove(sb.Length - 2, 2);
            sb.Append("], rows: [");
            foreach (DataRow dr in dt.Rows)
            {
                sb.Append("{c: [");
                for (int i = 0; i < dt.Columns.Count; i++)
                {
                    if (dt.Columns[i].ToString() == "Format")
                    {
                        sb.Remove(sb.Length - 3, 3);
                        sb.Append(", f: '");
                    }
                    else
                        sb.Append("{v: '");

                    if ((dr[i] != DBNull.Value) && (string)dr[i] != "")
                        sb.Append(dr[i] + "'}, ");
                    else
                        sb.Append("'}, ");

                }
                sb.Remove(sb.Length - 2, 2);
                sb.Append("]}, ");
            }
            sb.Remove(sb.Length - 2, 2);
            sb.Append("]};");
            return sb.ToString();
        }

正如您从上面的代码中看到的，我们需要一个包含名为DataTable的列的格式，以便在JSON中生成f键。请在下面找到一个C# DataTable示例和为google图表API创建JSON的调用：

var dt = new DataTable();
dt.Columns.Add("Name", typeof (String)).Caption = "Name";
dt.Columns.Add("Format", typeof (String)).Caption = "Format";
dt.Columns.Add("Manager", typeof (String)).Caption = "Manager";
dt.Rows.Add("Mathias Florin","Mathias Florin<div style=color:red; font-style:italic><p style=font-size:0.7em>Technical Leader</p></div>","Christian Florin");
dt.Rows.Add("Christian Florin","Christian Florin<div style=color:red; font-style:italic><p style=font-size:0.7em>CEO</p></div>","Christian Florin");
Page.ClientScript.RegisterStartupScript(GetType(), "vis", string.Format("var fundata = {0}", GoogleOrgChartJson(dt)), true);

可以在Manager列之后添加其他列，并且可以在google chart api的select事件中在JavaScript中访问这些列。