使用 SVG 创建分层图表

• 下载文章 - 145 KB

引言

这是我的一项工作，我乐在其中。 在寻找使用 SVG 创建分层图表的简单而完美的算法时，我找到了一些单独的技巧和解决方案。 现在我想和大家分享，使用 SVG 创建分层图表。

背景

此示例的主要目标是使用 SVG 创建图表。 分层类库将根据其包含的子节点数量排列节点。 它还会生成带有渐变色的 SVG xml 作为输出。

有一些可用功能...

1. 可折叠视图
用户可以通过点击 + - 符号来折叠/展开节点。 其他现有节点将根据层次结构重新排列。

2. 缩放
用户可以通过适应屏幕、放大和缩小来缩放图像。

3. 将图像附加到节点
可以将图像附加到每个节点，用户可以从中弹出窗口。

使用代码

为每个节点创建对象

		private void Page_Load(object sender, System.EventArgs e)
		{

			//CREATE OBJECT FOR EACH NODE AND ADD AS PER HIERARHCY .
			ShapeBase oChairman = getshape("CHAIRMAN", "COLOR1");
			graphabs.Root = oChairman;		

			ShapeBase oCFO = getshape("CFO", "COLOR2");
			addshape(graphabs.Root, oCFO);

			ShapeBase oCEO = getshape("CEO", "COLOR2");
			addshape(graphabs.Root, oCEO);

			ShapeBase oFman1 = getshape("FINANCIAL MANAGER 1", "COLOR3");
			addshape(oCFO, oFman1);

			ShapeBase oFman2 = getshape("FINANCIAL MANAGER 2", "COLOR3");
			addshape(oCFO, oFman2);

			ShapeBase oPM1 = getshape("PROJECT MANAGER 1", "COLOR3");
			addshape(oCEO, oPM1);

			ShapeBase oPM2 = getshape("PROJECT MANAGER 2", "COLOR3");
			addshape(oCEO, oPM2);

			ShapeBase oPL1 = getshape("PROJECT LEADER 1", "COLOR4");
			addshape(oPM1, oPL1);

			ShapeBase oPL2 = getshape("PROJECT LEADER 2", "COLOR4");
			addshape(oPM2, oPL2);

			ShapeBase oTM1 = getshape("TEAM MEMBER 1", "COLOR2");
			addshape(oPL1, oTM1);

			ShapeBase oTM2 = getshape("TEAM MEMBER 2", "COLOR2");
			addshape(oPL1, oTM2);

			ShapeBase oTM3 = getshape("TEAM MEMBER 3", "COLOR2");
			addshape(oPL1, oTM3);

			ShapeBase oTM4 = getshape("TEAM MEMBER 4", "COLOR2");
			addshape(oPL2, oTM4);

			ShapeBase oTM5 = getshape("TEAM MEMBER 5", "COLOR2");
			addshape(oPL2, oTM5);

			ShapeBase oTM6 = getshape("TEAM MEMBER 6", "COLOR2");
			addshape(oPL2, oTM6);

			//DRAWCHART FUNCTION WILL ARRANGE THE NODES BY HIEARHCY
			ShapeBase.DrawChart(graphabs.Root, false, 10, 10, false, graphabs.LevelCount);

			//CreateHierarchicalChart WILL GENERATE SVG DOCUMENT.
			XmlDocument xmldoc = yaflaSVG.CreateHierarchicalChart(getGradientsColors(), graphabs,2.3, true,false);

			Response.BufferOutput = true;

			xmldoc.Save(Response.OutputStream);
			Response.AppendHeader("Content-Disposition", "inline;filename=graphic.svgz");
			Response.ContentType = "image/svg+xml";
			Response.Flush();
			Response.End();
		}

		private ShapeBase getshape (string sText, string color)
		{
			ShapeBase node = new ShapeBase();
			node.Id = "G" + graphabs.Shapes.Count.ToString();
			node.TextDetail = sText;
			node.Text = sText;
			node.TextAlign = "middle";
			node.GradientColor = color;
			node.Fit();
			node.Height = 30;
			node.Links.Add(new ShapeLink("svgfiles\\email.gif", "", "Email", 10, 15, 10, 10));
			return node;
		}		

附加渐变色

private ArrayList getGradientsColors()
		{
			ArrayList  arrGradients = new ArrayList();

			arrGradients.Add(getGradientColor("255,255,255", "0,191,255", "COLOR1"));

			arrGradients.Add(getGradientColor("255,255,255", "65,105,225", "COLOR2"));

			arrGradients.Add(getGradientColor("255,255,255", "119,241,67", "COLOR3"));

			arrGradients.Add(getGradientColor("255,255,255", "255,255,204", "COLOR4"));			

			return arrGradients;
		}

这是我在 Codeproject 上的第一篇文章。 无论如何，我希望这能帮助大家。

请求

我将感谢您的评论/更正/建议。