目标：使用kendo ui图表组件将部门绘制到项目工作流程 工作流程的结构如下： 每个部门可能有多个战略，每个战略可能有多个计划，每个计划可能有多个项目。
我有一个WCF服务，当被调用时返回一个json字符串。 该服务调用返回XML的存储过程，在vb.net中然后我将该XML转换为json（使用json.net）。
服务代码：
Public Function GetStakeholderRelationshipMatrix(StakeholderId As Integer) As String
Try
conn.Open()
Dim da = New SqlDataAdapter()
sCommand = New SqlCommand("uspGetRelationshipMatrix", conn)
sCommand.CommandType = CommandType.StoredProcedure
sCommand.Parameters.AddWithValue("@StakeholderId", StakeholderId)
xmlDoc.LoadXml(sCommand.ExecuteScalar())
Return JsonConvert.SerializeXmlNode(xmlDoc)
Catch ex As Exception
Return -1
End Try
End Function
XML数据
<Departments>
<Department Id="7" Name="Information Technology Department">
<Strategies Id="21" Name="Increase Revenue">
<Programs Id="45" Name="Program1">
<Projects Id="4" Name="test3" />
</Programs>
<Programs Id="49" Name="Program4">
<Projects Id="2" Name="Test1" />
<Projects Id="3" Name="Test2" />
</Programs>
</Strategies>
</Department>
</Departments>
Json转换数据：
{"d":"{\"Departments\":{\"Department\":{\"@Id\":\"7\",\"@Name\":\"Information Technology Department\",\"Strategies\":{\"@Id\":\"21\",\"@Name\":\"Increase Revenue\",\"Programs\":[{\"@Id\":\"45\",\"@Name\":\"Program1\",\"Projects\":{\"@Id\":\"4\",\"@Name\":\"test3\"}},{\"@Id\":\"49\",\"@Name\":\"Program4\",\"Projects\":[{\"@Id\":\"2\",\"@Name\":\"Test1\"},{\"@Id\":\"3\",\"@Name\":\"Test2\"}]}]}}}}"}
我无法将数据（json）绑定到图表组件，以便成功显示工作流程。我需要帮助将json字符串绑定到图表组件。
剑道代码：
<div id="visual"></div>
var dsRelationshipMatrix = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
url: "wcf service return json string",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "GET",
success: function (result) {
var obj = $.parseJSON(result.d);
if (obj == null) {
options.success([]);
} else {
options.success(obj);
}
},
error: function (result) {
options.error(result)
}
});
}
},
schema: {
data: function (data) {
return data
}
}
}); //closes data source
function createDiagram() {
$("#visual").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: dsRelationshipMatrix,
schema: {
model: {
children: "Strategies"
}
}
}),
layout: {
type: "layered"
},
shapeDefaults: {
visual: visualTemplate
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 2
}
}
});
var diagram = $("#visual").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}
答案 0 :(得分：0)
经历了一段时间的痛苦后，我开始工作并想与大家分享这些信息。这可能不是完美的方式，但它是实现它的方法之一。 关键是SQL数据的结构（以XML格式提取）。
在SQL中，我最终执行了一个递归循环，它提取数据并将其格式化为XML。因此，ROOT的根节点包含一个项目（部门 - 只能有一个部门），每个层次结构类别都有一个项目部分，项目部分作为项目的子项。结构的措辞相当困难......
SQL：
SELECT
--dStakeholder.StakeholderId AS '@Id',
dStakeholder.FunctionalDepartment as 'item/info' ,
'#1696d3' as 'item/colorScheme',
(SELECT
--dStrategy.StrategyId AS '@Id',
dStrategy.StrategyDescription 'item/info',
'#1696d3' as 'item/colorScheme' ,
(Select
--dPrograms.ProgramId as '@Id',
dPrograms.ProgramDescription 'item/info' ,
'#1696d3' as 'item/colorScheme' ,
(Select
--dHeaders.ProjectId as '@Id',
dHeaders.ProjectName 'item/info',
'#1696d3' as 'item/colorScheme'
from
dbo.ProjectHeaders as dHeaders
inner join (select distinct projectid, programid, departmentid from dbo.ProjectHeaders) as pp
on dHeaders.ProjectId = pp.ProjectId
where pp.ProgramId = dPrograms.ProgramId and pp.departmentid = dStakeholder.Stakeholderid
FOR XML PATH(''), TYPE
) as 'item/items'
from
dbo.ProjectPrograms as dPrograms
inner join (select distinct programid, strategyid , departmentid from dbo.ProjectHeaders) as sp
on dPrograms.ProgramId = sp.ProgramId
where sp.StrategyId = dStrategy.StrategyId and sp.departmentid = dstakeholder.stakeholderid
FOR XML PATH(''), TYPE
) as 'item/items'
FROM
dbo.ProjectStrategies as dStrategy
inner join (select distinct strategyid , departmentid from dbo.ProjectHeaders) as bss
on dStrategy.StrategyId = bss.StrategyId
WHERE
dStakeholder.StakeholderId = bss.DepartmentId
FOR XML PATH(''), TYPE
) as 'item/items'
FROM
dbo.Stakeholders as dStakeholder
FOR XML PATH('root'), type
来自sql的我的数据以这种方式出现在XML中：
<root>
<item>
<info>ERISA Compliance Services Department</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>New Commission</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>Program3</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>test3</info>
<colorScheme>#1696d3</colorScheme>
</item>
</items>
</item>
</items>
</item>
<item>
<info>SAGA Development</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>Program1</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>Test1</info>
<colorScheme>#1696d3</colorScheme>
</item>
</items>
</item>
<item>
<info>Program4</info>
<colorScheme>#1696d3</colorScheme>
<items>
<item>
<info>Test2</info>
<colorScheme>#1696d3</colorScheme>
</item>
</items>
</item>
</items>
</item>
</items>
</item>
</root>
现在我浏览我的xml并获取重要信息。 VB.net中的代码。项目的类只列出了我需要的属性。
conn.Open()
Dim dt As New DataTable
Dim da As New SqlDataAdapter("uspGetRelationshipMatrix " + Convert.ToString(StakeholderId), conn)
da.Fill(dt)
Dim sb = New StringBuilder()
If dt.Rows.Count <> 0 Then
For Each row As DataRow In dt.Rows
sb.Append(row.Item("Data"))
Next
End If
conn.Close()
xmlDoc.LoadXml(sb.ToString)
Dim itemList As New List(Of Item)
Dim RootNode As XmlNode
RootNode = xmlDoc.SelectSingleNode("/root")
For Each DeptNode As XmlNode In RootNode.ChildNodes
Dim deptItem As New Item
'check to ensure that is not nothing
Dim info As XmlNode = DeptNode.SelectSingleNode("info")
Dim cs As XmlNode = DeptNode.SelectSingleNode("colorScheme")
deptItem.info = info.InnerText
deptItem.colorScheme = cs.InnerText
'Begin items loop for child nodes
Dim stratItems As XmlNode = DeptNode.SelectSingleNode("items")
For Each stratItemNode As XmlNode In stratItems.ChildNodes
Dim stratItem As New Item
Dim stratinfo As XmlNode = stratItemNode.SelectSingleNode("info")
Dim stratcs As XmlNode = stratItemNode.SelectSingleNode("colorScheme")
stratItem.info = stratinfo.InnerText
stratItem.colorScheme = stratcs.InnerText
'place start loop
Dim progItems As XmlNode = stratItemNode.SelectSingleNode("items")
For Each progItemNode As XmlNode In progItems.ChildNodes
Dim progItem As New Item
Dim proginfo As XmlNode = progItemNode.SelectSingleNode("info")
Dim progcs As XmlNode = progItemNode.SelectSingleNode("colorScheme")
progItem.info = proginfo.InnerText
progItem.colorScheme = progcs.InnerText
'place start loop
Dim projItems As XmlNode = progItemNode.SelectSingleNode("items")
For Each projItemNode As XmlNode In projItems.ChildNodes
Dim projItem As New Item
Dim projinfo As XmlNode = projItemNode.SelectSingleNode("info")
Dim projcs As XmlNode = projItemNode.SelectSingleNode("colorScheme")
projItem.info = projinfo.InnerText
projItem.colorScheme = projcs.InnerText
'place start loop
'place end loop
progItem.items.Add(projItem)
Next
'place end loop
stratItem.items.Add(progItem)
Next
'place end loop
deptItem.items.Add(stratItem)
Next
'end items loop
itemList.Add(deptItem)
Next
然后我在vb.net中使用newtonsoft json，以便将信息显示为json字符串。 Json字符串：
[
{ ＆＃34; info＆＃34;：＆＃34; ERISA合规服务部门＆＃34;， ＆＃34; COLORSCHEME＆＃34;：＆＃34;＃1696d3＆＃34 ;, ＆＃34;项目＆＃34;：[ { ＆＃34; info＆＃34;：＆＃34;新委员会＆＃34;， ＆＃34; COLORSCHEME＆＃34;：＆＃34;＃1696d3＆＃34 ;, ＆＃34;项目＆＃34;：[ { ＆＃34;信息＆＃34;：＆＃34;节目3＆＃34 ;, ＆＃34; COLORSCHEME＆＃34;：＆＃34;＃1696d3＆＃34 ;, ＆＃34;项目＆＃34;：[ { ＆＃34;信息＆＃34;：＆＃34; TEST3＆＃34 ;, ＆＃34; COLORSCHEME＆＃34;：＆＃34;＃1696d3＆＃34 ;, ＆＃34;项目＆＃34;：[
]
}
]
}
]
},
{
"info":"SAGA Development",
"colorScheme":"#1696d3",
"items":[
{
"info":"Program1",
"colorScheme":"#1696d3",
"items":[
{
"info":"Test1",
"colorScheme":"#1696d3",
"items":[
]
}
]
},
{
"info":"Program4",
"colorScheme":"#1696d3",
"items":[
{
"info":"Test2",
"colorScheme":"#1696d3",
"items":[
]
}
]
}
]
}
]
} ]
在这个结构中使用json格式化，现在我只是将json插入到kendo图中，现在你可以获得流的可视化分层图像。