Question

我一直在使用Tkinter和Pygame作为GUI来可视化数据点。使用Tkinter，可以从列表中选择文件，然后打开一个Pygame窗口，在该窗口中可以绘制数据点的图形。 Pygame并非用于数据可视化，我想使用一种替代方法。

我想使用JavaScript可视化数据，但是我不知道如何将文件中的大量点数据带入浏览器窗口，然后让用户能够操纵数据（移动，添加或删除点），然后将数据保存回去。

我需要哪些工具将数据导入JavaScript，生成用于制图的图形和其他一些基本形状（文本，线条，点），然后将数据导出？

Answer 1

plotly.js是一个很棒的JS库，它使您可以轻松地可视化Web上的任何数据。您可以查看链接并在Internet上搜索一些教程，例如本教程，但我认为这不是问题。

问题在于从文件中获取数据。

谈到网络时，您将需要某种可以提供和接收文件的网络服务器。

Web浏览器允许用户输入文件（可以使用html标签input完成），然后将包含文件数据的请求发送到Web服务器（这是JS代码所在的位置），然后您可以在其中处理数据，然后将响应发送回浏览器以显示。

尽管Web服务器可能很容易上手，但是您可以使用许多种语言（包括JavaScript）来完成它，但我认为到目前为止，构建Web服务器对您来说并不重要。

如果您坚持使用JavaScript进行构建，则必须找到另一种方法来获取要绘制的数据，或者实际上构建某种服务器来处理您希望用户输入的这些文件。如果确实适合您，这里是starting tutorial用于使用Node.js（JavaScript）构建Web服务器，这里是another one用于通过django（Python）构建Web服务器

但是，如果您不喜欢这个想法并且不介意回到Python，则可以使用matplotlib。

Python有一个名为matplotlib的第三方模块，使用该模块，您可以非常轻松地绘制点并使用许多不同的自定义进行绘制。

因此，从文件中提取点之后，您可以删除正在使用的任何Pygame代码，而只需执行以下操作即可：

import matplotlib.pyplot as plt

...  # extracting your points from the files

plt.plot(xpoints, ypoints)
plt.show()

xpoints和ypoints是文件中的重点

这将创建一个折线图。您可以通过向plot函数传递可选的第三个参数来自定义此图，例如：

plt.plot(xpoints, ypoints, "x")

这只会绘制点，而不是画一条线。您还可以将“ x”更改为“ ro”，“ bo”，“ r +”等等。

您可以参考上面的链接以查看matplotlib文档，并选择是要尝试还是真正坚持使用JS。但是，海事组织，我认为在这种情况下，您将不得不寻找另一种获取数据的方法，因为构建Web服务器需要时间和理解，并且一开始可能会很混乱：）

用于可视化，操作和导出数据点的JavaScript？

1 个答案: