在Node-RED UI中可视化csv文件数据

Question

我想在node-red ui中可视化来自csv文件的数据。我想要做的是在csv文件中显示一个国家的旗帜。所以在csv文件中我有2列（国家，数量）。

由于我是node-red的新手，我想得到一些提示如何做到这一点。

提前致谢。

我的流量与CSV数据

Answer 1

欢迎来到Node-RED！

首先，您需要确定您想要的UI类型。 Node-RED有多种选择，包括使用http输入/输出和模板节点创建数据驱动的网页，通过更动态但稍微复杂的仪表板，再到使用节点等功能的全功率动态网络应用程序。红色的contrib-uibuilder。

最简单的方法是使用http-in和http-out节点来定义网页。然后在http-in之后添加文件阅读器，然后添加CSV节点（将CSV数据转换为JSON）。然后，您可以使用node-red-contrib-tableify将您的JSON转换为HTML表。最后使用模板节点将表插入到http-out节点发送回浏览器的html中。

http-in -> file read -> csv -> tablify -> template -> http-out

一旦你掌握了这一点，你可以继续使用模板或交换使用仪表板甚至uibuilder，具体取决于你的需要。

---

I have to create a web page first, right?

您在http-in节点中定义URL。当-in连接到-out时，你有一个“页面”。虽然没有内容。要创建内容，您可以使用模板节点。事实上，将csv数据推送到tablify节点并进入模板会给你足够的页面来查看数据。模板本身只需要：

<pre>{{payload}}</pre>

当然，您也可以根据需要将其与其他HTML元素包装在一起。但仅此一点就足以使某些东西变得有用。

How can I trigger the http-in?

您只需从浏览器中引用该URL即可。因此，如果您将http-in节点设置为使用URL /fred并且您在运行Node-RED的同一设备上使用了浏览器，则可以在浏览器中使用URL http://localhost:1880/fred。

How should I design the web page to be able to put the information from the csv file into it by the http-out node?

tablify节点为您执行此操作。

把我概述的内容串起来，你应该看到一些可以让你走得更远的东西。

我建议只使用http-in，template和http-out节点启动，以便您可以看到它们如何协同工作。然后在没有csv或tablify节点的情况下输入数据，然后添加csv，最后添加tablify。这样你就可以看到事情是如何运作的。