Question

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

我可以使用.NET Visualization帮助程序库从这里创建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();
        }

从上面的代码中可以看出，我们需要一个带有名为Format的列的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访问。

如何使用.NET DataTable从Google图表工具/虚拟化API创建组织结构图？

1 个答案: