0

根据 Syncfusion 的文档，图表控件（ejs-diagram）应该支持使用 datasourcesettings 属性（https://ej2.syncfusion.com/angular/documentation/diagram/data-binding/）进行数据绑定。我一直试图让它工作，但似乎没有任何样本（来自文档）似乎适用于 Angular 12。

复制步骤：

预期结果：应该按照文档实际结果：空白页。（请注意，如果我删除快照设置，我至少会显示背景网格）

我还尝试在 html 中和通过绑定节点属性显式设置节点，这似乎有效

4

2 回答 2

1

我们已经为带有上下文菜单的图表创建了一个示例。我们已经检查了 Angular 12 中的图表上下文菜单功能，它工作正常。我们还可以与上下文菜单进行交互。我们怀疑问题的出现是因为您没有在图表中注入 DiagramContextMenu 模块，或者您没有在 style.css 中添加与上下文菜单相关的 CSS，因此上下文菜单不会出现在图表中。要在图表中使用上下文菜单，请在图表中注入DiagramContextMenu模块，并在style.css文件中添加上下文菜单相关的CSS。如何注入DiagramContextMenu以及如何使用上下文菜单CSS请参考代码片段.

//app.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Diagram, NodeModel, ConnectorModel, SnapConstraints, SnapSettingsModel, DiagramTools, ContextMenuSettingsModel, DiagramContextMenu } from '@syncfusion/ej2-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
Diagram.Inject(DiagramContextMenu)
public contextMenu: ContextMenuSettingsModel = { show: true}

;

// 样式.css

@import '../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css';// Add the context menu related css

@import ../node_modules/@syncfusion/ej2-navigations/styles/material.css;

我们附上了关于图表上下文菜单如何工作的视频演示。请参考以下视频链接。

视频：https ://www.syncfusion.com/downloads/support/directtrac/general/ze/ContextMenu-Video1968682518

我们附上了一个带有上下文菜单的 Angular-12 示例供您参考。请在以下链接中找到示例

示例：https ://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular-ContextMenu1248041383

如果问题仍然存在，请与我们分享一个简单的示例来说明问题，或者修改上述示例以使用问题复制步骤复制问题。这将有助于我们更好地为您服务。

于 2021-06-15T14:38:14.083 回答
1

目前，我们在 Angular 12 中没有对图表的完全兼容性支持。我们将在 Volume 2 2021 主版本中提供对图表的完全兼容性支持。但是，我们已经检查了 Angular 12 中的图表数据绑定功能。我们在数据绑定中没有遇到任何问题。我们怀疑问题的出现是因为您没有在图中注入 DataBinding 和 HierarchicalTree 模块，或者没有在 app.module.ts 中包含图服务。我们已经在文档中提到如何在 app.module.ts 中注入图表模块。请参阅以下文档了解如何注入图表模块。

模块注入：https ://ej2.syncfusion.com/angular/documentation/diagram/getting-started/#module-injection

我们附上了如何运行图表数据绑定示例的视频演示。请参考以下视频链接

视频：https ://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagram-DataBinding-Video-90404990

我们附上了一个 Angular-12 示例供您参考。请在以下链接中找到示例

示例：https ://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagram-DataBinding-670541750

如果问题仍然存在，请与我们分享一个简单的示例来说明问题，或者修改上述示例以使用问题复制步骤复制问题。这将有助于我们更好地为您服务。

于 2021-06-10T10:27:22.980 回答