根据您的 Kendo UI 网格中的数据生成图表

原文链接： www.telerik.com/blogs/gener…

在本教程中，了解如何根据 Kendo UI for Angular Grid 中的数据轻松生成各种图表。

使用 Kendo UI for Angular 的人经常遇到的一个问题是他们如何一起使用 Grid 和 Chart 组件。 毕竟这是有道理的，网格可以显示原始数据，而图表是可视化使用所述数据的好方法。 我们经常被问到的一种特殊情况：

“如何使用网格中的当前选择生成图表？”

好吧，我在这里想说它就像馅饼一样简单🥧，您只需要一个网格、一个图表、一个菜单组件，也许还有一个馅饼罐！

在这篇文章中，我将带您了解 这个杀手级演示， 以及如何在 Angular Grid 的 Kendo UI 中实现这样的 ✨ MAJESTY ✨！ 要轻松跟进，请获取 源代码 ，看看我们做了什么。 我将介绍在我们的组件之间设置这种类型的交互的重要部分！

此 gif 取自我们的示例应用程序之一，您可以在此处找到： : https //prgress.co/ChartsSampleApp 。 对于那些想要了解源代码的人，这里是 GitHub 存储库的链接： : https //prgress.co/ChartsGitHub 。

当您在此网格上选择一行并右键单击它时，您将看到一个上下文菜单。 在此菜单中，您将看到可以使用该数据生成的所有图表类型。

选择图表类型后，将弹出一个对话框，其中以图表形式显示所选数据！

本文将介绍创建此工作流所需的一些步骤。 我们将首先添加右键单击图表类型的菜单。 然后我们将向您展示如何构建被选中的不同图表。 让我们深入了解示例应用程序，看看演示所关注的交互类型！

构建最可爱的网格

当然，这个令人难以置信的网格到图表之旅的第一步是。 网格。 我们在此网格中添加了许多项目：用于可选性的复选框、名称和描述，许多其他数据片段，以及最后一列中的迷你网格！ 您可以通过指定使用的模板来进一步自定义您的 Kendo UI 网格的单元格和列。 查看我们的 网格模板文档 了解更多详情。

让我们回顾一下 Grid 的“骨架”，看看我们是如何实现这种布局的：

网格本身

首先，我们需要创建网格本身，如果您愿意，可以使用馅饼罐来盛放这种精美的甜点。 我们的数据是 public gridData:Stock[] = stocksInPortfolio;来自 data.ts 文件 如果您想查看它的格式，它 。

可选设置

我们正在通过 [SelectableSettings](https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/)允许用户选择带有或不带有箭头选择的网格（以便他们可以单击行），并且我们允许一次选择多行。

持久选择

如果您注意到 kendoGridSelectBy绑定，这是我们在我们选择的存储项目中链接的地方。 这 selectedKeys是我们定义存储所选项目的集合的地方。 我喜欢这个功能！ 阅读我们的 持久选择 文档的更多信息。

注意：这里需要注意的一个重要部分——当用户更改他们选择的项目时，网格会发出一个 selectionChange我们用来调用的事件 onSelectionChange()，它存储新的选定项目以供持久化！ 🙌

我们网格的列

现在让我们看看我们创建的其他列！ 第一个是为选择能力创建复选框。 我们正在具体 showSelectAll为 true 所以我们在标题中有一个全选复选框。

接下来，我们有股票首字母缩略词的符号列：

然后跟在股票的名称后面，正如您所期望的：

我们用于 Angular Grid 的 Kendo UI 非常灵活，正如您在此处看到的，下一列使用了 Angular 元素 [ng-template](https://angular.io/guide/structural-directives#the-ng-template)（角度模板不是我们自己的模板）自定义外观！ 正如您将在下面看到的，许多其他列也是如此。

在我创建的这个要点中查看此网格的其余部分，以便于查看。 （或 查看 在此处 完整文件。 ）展开下面的箭头以查看完整标记。

我们网格的内部部分

对这些列的一个很酷的说明 - 图表库非常灵活，我们甚至可以在网格本身的较小图表中使用它（请参阅最后一列及其迷你图表操作！）。

你们中的一些人可能已经注意到，上面的上下文菜单还有一个“导出到 Excel”选项。 您知道 Angular 的 Kendo UI 有一个客户端 Excel 框架，您可以使用它来动态创建 Excel 文件吗？ 嗯，不仅如此，它还内置于网格中。

默认情况下，如果我们启用此功能，Grid 只会将它可以导出的所有内容导出到 Excel 文件。 但是，我们可以准确指定我们希望导出的内容以及导出中实际包含哪些列。 这可以是数据中的任何字段，因此即使我们没有在 Kendo UI Grid 中显示它，它也可以导出。 还， fetchData允许我们指定我们可以去哪里导出所有数据，而不仅仅是当前在网格中的内容（可能只是当前页面）。 这对于需要加载较少数据的轻量级前端但仍希望根据用户请求导出整个数据集的场景非常方便。 一探究竟：

您可以在此处自定义导出到 excel 的样子。 查看您的所有选项 在我们的文档中 。

现在我们在最可爱的网格中拥有了所需的数据，我们准备将这些数据转换为图表形式！ 第一步是在选择某些数据块然后右键单击时创建一个菜单（如下所示）。

拥有这样的菜单将允许我们选择我们想要查看所选数据行的图表类型。那么我们如何做到这一点？

构建上下文菜单

使用我们的网格捕获点击事件就像馅饼一样简单！ 🥧 在我们的股票列表组件内部，我们可以这样说来捕获网格单元上的点击事件：

在网格单元上使用 cellClickEvent

随着网格 cellClickEvent你有两种类型： click和 contextmenu. 第一个， click, 将在单击时触发（或从键盘输入）。 这 contextmenu单击事件将在右键单击时触发。 🥳

我们现在可以获取点击事件（如果它发生在右键单击）并构建一个小弹出菜单来显示我们的图表选项！！ 🥧 馅饼，对吧？！

防止右键单击默认值

我们还可以访问触发 cellClick事件（称为 originalEvent）。 如果我们在控制台中将其注销，您可以看到我们可以访问的所有内容：

单击事件的所有属性！

我们正在抓取右键单击的 originalEvent 并防止默认发生。 这种情况下的默认设置是右键单击时弹出的普通浏览器菜单：

注意：如果你想自己跟进或 fork 项目， 请查看这里的 repo！

现在我们已经捕获了右键单击并阻止了默认，我们已经准备好迎接你们一直在等待的事情！ 菜单组件！

使用@ViewChild 注入我们的 gridMenu

首先，我们让我们的组件访问 gridContextMenu. 此上下文菜单使用的是 Kendo UI ContextMenuComponent.

现在，右键单击，我们需要定位这个漂亮的菜单：

构建菜单的标记

这里是 kendo-contextmenu在我们的股票列表组件的 HTML 文件中：

我们在标记中声明性地定义此菜单，然后在发生右键单击事件时使用它。 如您所见，我们正在使用此菜单做很多事情。 我们在切换 openOnClick所以一旦网格被右键单击，上下文菜单就会出现。 然后我们有一个 onSelect在选择时触发的方法。 一探究竟：

在这里，我们正在做一些神奇的事情。 我们正在返回（基本上不采取任何行动，如果点击的项目是 Charts或未定义。 如果选择的项目是 Export Excel然后我们将网格保存到 Excel 文件中。 否则，我们将使用选定的数据构建一个宏伟的图表并隐藏 contextMenu！

但是，我们如何构建填充此菜单的项目？

至于菜单项，我们正在从 中获取数据以填充它们 data.ts 文件 。

这当然是我们让项目循环并设置 item.text 的方式！

因此，让我们回顾一下所有这些从网格到图表的辉煌！ 我们有一个功能强大的网格，其中包含可选择的数据行。 一旦您选择了您感兴趣的数据，右键单击将调出一个 Kendo UI 上下文菜单，我们已经填充了所有图表选项。 然后，您可以选择一个图表，并在一个漂亮且功能齐全的 Kendo UI 图表中立即在弹出窗口中查看您的数据集。 我们还使用内置的 excel 框架将任意数据组合导出到 Excel，只需单击一下按钮即可。

我鼓励你 把这个项目拉下来 ，更深入地研究我们在本文中没有涉及的其他整洁的细节。 我真的很喜欢这个演示， Tsvetomir 和 Svetlin 努力展示了多个 Kendo UI 结合 Angular 组件的强大功能。

• 此示例应用程序的文档： prgress.co/ChartsDocsS…
• 示例应用程序： prgress.co/ChartsSampl…
• GitHub: prgress.co/ChartsGitHu…