1

我正在使用 Dabeng Orgchart 库（很棒的库，顺便说一句），但我想自定义节点，特别是创建一个菱形而不是大多数示例中的正方形。我已经看到了 createNode 方法，并且我找到了各种用于创建钻石的 css，但我不知道如何将它集成到 dabeng org 图表中。如果满足某些条件，我想要做的是显示一个菱形，如果满足其他条件，则显示默认的正方形。我搜索了谷歌，但没有改变形状的例子。

4

3 回答 3

1

我目前正在为组织结构图使用 nodeTemplate 属性。例子：

var oc = $('#container').orgchart({
   ...
   'nodeTemplate': orgTemplate,
   ...
});

在您的 orgtemplate 函数中，数据是您在 orgchart 数据中包含的任何内容（在示例中为名称和标题）。你可以用其他标志填充这个对象。例如，我有一个图表，我在其中创建新节点并允许用户在将数据提交到图表之前将数据输入节点。我的数据对象中有一个用于 data.isSaved 的标志，用于告诉我的模板是否保存了此节点。如果它被保存，我有内联 html 检查（在 AngularJS 中使用 ngIf 等，如果你完全熟悉 AngularJS）来根据数据更改模板。

在 VanillaJS 中，您可以只返回纯 HTML，而无需 $compile 以及所有附加到您自己的节点模板中的泵。您实际上可以在函数中进行检查，例如：

function orgTemplate(data) {
    if(data.isDiamond) {
       return '<div class="diamond">...</div>';
    } else {
       return '<div class="square">...</div>';
    }
}

我在我的网站中使用 AngularJS，因此我定义了新的范围并使用 angular 指令使其更具可扩展性。这是供任何偶然发现此问题的人参考。我的 orgTemplate 函数定义如下。

function orgTemplate(data) {
    var newScope = $scope.$new(true);
    newScope.data = data;
    return ( $compile('<div data-ng-include="\'.../template.html\'"></div>')(newScope));
}

这是 orgChart Github，我相信你已经浏览过很多次了。如果您查看底部，您将看到我上面提到的 nodeTemplate 属性定义。希望这可以帮助！

旁注：我在使用自定义模板时遇到了一些样式问题，尤其是在定义不同的图形方向（即“l2r”）时。

于 2017-12-19T16:45:02.180 回答
0

您现在可以使用选项“ndoeTemplate”自定义您自己的节点结构或形状：

var nodeTemplate = function(data) {
  return `
    <span class="office">${data.office}</span>
    <div class="title">${data.name}</div>
    <div class="content">${data.title}</div>
  `;
}

var oc = $('#chart-container').orgchart({
  'data' : ds,
  'nodeTemplate': nodeTemplate
});

随意玩这个演示。

于 2018-09-07T08:42:57.817 回答
-1

我建议您使用 getorgchart 代替它是高度可定制的

http://www.getorgchart.com/Demos/Create-Your-Own-Theme-4

组织结构图钻石

于 2017-12-06T04:35:39.007 回答