如何为JavaScript组织图创建独特的样式？
4.50/5 (3投票s)
以下是 dhtmlxDiagram 的自定义选项概述，这是一个用于创建组织结构图和其他类型图表的 JavaScript 库。
引言
组织结构图能够以易于理解的方式表示组织的层级结构。它们不一定非要花哨，但能够按需更改组织结构图的外观始终很重要。在本文中，我们将探讨如何使用 DHTMLX 团队开发的 JavaScript 图表库创建自定义样式的层级图表。
在页面上初始化图表
您应该 下载 dhtmlxDiagram 库 并在页面上添加一个 js 和一个 css 文件。
<script src="codebase/diagram.js"></script>
<link href="codebase/diagram.css" rel="stylesheet">
现在，您可以创建一个新的 DIV 容器来容纳组织结构图并对其进行初始化。
<body>
<div id="my_diagram"></div>
<script type="text/javascript">
var myDiagram = new dhx.Diagram("my_diagram", {type: "org"});
</script>
</body>
构造函数以 DIV 容器的 ID 作为参数。type 属性是一个必需属性，用于选择您将要创建的图表类型。除此之外，还有一组 可选属性，允许配置图表。
现在您可以 使用数据初始化图表。要创建新的数据集，您可以使用内联 JSON 对象。
var my_dataset = [
{
id: "1",
text: "Chairman & CEO",
title: "Henry Bennett"
},
{
id: "2",
text: "Manager",
title: "Mildred Kim"
},
{
id: "3",
text: "Technical Director",
title: "Jerry Wagner"
},
{ id: "1-2", from: "1", to: "2", type: "line" },
{ id: "1-3", from: "1", to: "3", type: "line" }
];
如您所见，我们的图表将包含三个节点。我们为每个节点定义了 ID、文本和标题。除此之外，我们还定义了节点之间的连接。
创建数据后，可以使用 parse 方法将其加载到图表中。
myDiagram.parse(my_dataset);
如果您在浏览器中打开该页面，您将看到默认的组织结构图。
现在，让我们看看如何更改此图表的外观。
更改您的组织结构图的外观
更改比例
如果您想创建一个处理组织结构图的移动应用程序，更改图表比例的功能将非常有用。为此，您可以更改 scale 属性的值。默认值为 1。您可以将属性设置为大于 1 的值来放大。要缩小，请使用小于 1 的值。
它是如何工作的：
var myDiagram = new dhx.Diagram("my_diagram", {
type: "org",
//changing the scale
scale: 0.75
});
结果如下所示：
更改形状类型
默认情况下，dhtmlxDiagram 库为其节点使用 card 形状类型。除此之外，您还可以使用另外两种类型：img-card，它允许添加带图片的形状；svg-card，它允许在 Internet Explorer 中渲染形状。让我们看看 img-card 类型的工作原理。
您可以使用 defaultShapeType 属性为图表中所有形状设置默认类型。
var myDiagram = new dhx.Diagram("my_diagram", {
type: "org",
scale: 0.75,
defaultShapeType: “img-card”
});
另一个选项是使用数据项对象的 type 属性为图表的特定节点定义单个类型。这是一个例子：
var my_dataset = [
{
id: "1",
text: "Chairman & CEO",
title: "Henry Bennett",
type: "img-card",
img:"./path/to/file.png"
},
];
如果您在浏览器中打开图表，您将看到相应的节点现在包含一个图像。
更改节点的位置
可以更改图表的位置并为图表节点定义边距。为此，您可以使用 margin 属性。它包含以下属性：
-
itemX 定义两个形状之间的水平间距。
-
itemY 定义两个形状之间的垂直间距。
-
x 定义图表容器和第一个节点之间的水平间距。
-
y 定义图表容器和第一个节点之间的垂直间距。
这是设置所需值的方法：
var myDiagram = new dhx.Diagram("my_diagram", {
type: "org",
margin:{
x:30,
y:30,
itemX:80,
itemY:80
}
});
使用此代码，您将获得以下结果：
使用 CSS 更改样式
有两个类允许更改图表的样式。.dhx_item_shape 允许更改形状的样式。通过更改 .shape_content CSS 类，您可以修改形状的内容。
除此之外，您还可以更改节点之间的连接器的外观。您可以定义自定义 CSS 类并在配置对象中使用它。让我们看一个小例子。这里有一些 CSS 代码：
.myStyle .shape_content {
background: #9575CB;
color: #FFF;
}
.myStyle:hover .shape_content {
background: #00B7FE;
}
.myConnector {
stroke: red;
stroke-dasharray: 10;
}
现在，您可以创建数据集并为特定形状或连接器定义自定义样式。有四个属性允许更改图表元素的样式和大小：
-
css 允许设置将应用于形状的 CSS 类的名称。
-
color 定义形状头的颜色。
-
height 允许调整形状的高度。
-
width 允许更改形状的宽度。
这是使用这些属性的方法：
var my_dataset = [
{
id: "1",
text: "Chairman & CEO",
color: "#673AB7",
css: "myStyle",
},
{
id: "2",
text: "Manager",
color: "#E91E63"
},
{
id: "3",
text: "Technical Director",
color: "#9C27B0",
width: 200
},
{
id: "1-2",
from: "1",
to: "2",
css: "myConnector",
type: "line"
},
{
id: "1-3",
from: "1",
to: "3",
type: "line"
}
]
结果如下：
使用嵌套节点
dir:"vertical" 属性允许创建美观整洁的嵌套列表。如果您将此属性应用于特定形状，其所有子节点都将垂直连接，包括嵌套的子节点。创建数据集时，您可以使用 parent 属性来定义此特定形状的 parent。例如：
var my_dataset = [
{
"id": 1,
"text": "item: 1",
},
{
"id": 2,
"text": "item: 2",
"parent": 1,
"dir": "vertical"
},
{
"id": 3,
"text": "item: 3",
"parent": 14
},
{
"id": 7,
"text": "item: 7",
"parent": 14
},
{
"id": 14,
"text": "item: 14",
"parent": 2
},
{
"id": 19,
"text": "item: 19",
"parent": 2
}
];
结果是，您将得到一个嵌套图，如上面的截图所示。
为组织结构图使用编辑器模式
除了上述可能性之外，还有另一种选项可以为您的组织结构图创建独特的样式。编辑器模式 提供了拖放式图表编辑功能，无需编写任何代码。您可以通过拖动形状、通过颜色选择器选择所需的颜色以及通过侧边栏编辑器定义位置和大小值来调整所有描述的更改。
结论（暂代）
我希望这份简短的指南能对那些正在为他们的应用程序寻找快速且美观的 JavaScript 组织结构图的开发者有所帮助。DHTMLX 团队的目标是创建一个简单但高度可定制的组件，现在它就在这里。请注意，如果您正在寻找一个完整的开源解决方案，这个库可能不适合您，但您可以在 GitHub 上找到一些有价值的项目。
祝您编码愉快！