在本地主机 NodeJS 上查看图表

Question

有什么方法可以在 NodeJS 中生成绘图并在本地主机而不是在 HTML 中查看它？如果有，怎么办？如果没有，那么我还可以通过哪些其他方式创建图形并在 NodeJS 中查看它们？

更新：我想到了一个解决方法，它创建一个服务器，使用 http 节点模块，然后在服务器上显示的 HTML 代码中，我们通过 [= plotly 加载11=] 并在那里完成其余的 JS 处理。但是，我仍然想要一种不占用太多代码行的方法。

Answer 1

Plotly for nodejs 并不天然支持此功能。要了解更多信息，请查看 this article。您可以创建一个 node.js 图形，并且可以使用 html 独立地嵌入它。

我发现的一个解决方法是：

优点：

只要您的设备处于运行ning 状态，就始终处于运行状态。

缺点：

您需要 API 密钥。
您需要一个 Plotly 帐户。
您必须从您的政务帐户中获取 URL。 Node.js 你
必须从您的 plotly 帐户中获取 URL。

Node.js

require('plotly')(username, api_key);

var data = [
  {
    x: ["giraffes", "orangutans", "monkeys"],
    y: [20, 14, 23],
    type: "bar"
  }
];
var graphOptions = {filename: "basic-bar", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

HTML

<iframe scr="ploty_embed_URL_which_you_find_in_your_plotly_account"></iframe>

您也可以在 HTML 中使用 plotly.js。

您必须从内容分发网络 (CDNJS) 导入 plotly.js。或者安装它。
您必须创建一个 div 标签并创建任何 ID（出于说明性原因，我使用了 ExampleId，您不必这样做）。
您需要前往 plotly.js docs 并点击您想要的图表。
复制并粘贴 js 代码并编辑您要更改的值。
运行你的代码！

优点：

您不需要帐户。
在你的服务器上少space。
在客户端工作，因此不会损害您的服务器。
选择你想要的版本运行。
所有这些都在您的 javascript 文件中，因此您不必担心它因人而异。（网站上的每个人都会看到同样的东西。）

缺点：

cdnjs挂了网站就上不去了（很少挂，但还是有缺点。

注意：如果您知道自己在做什么，则不必从文档中复制代码我将复制和粘贴用于演示目的。

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter'
};

var data = [trace1, trace2];

Plotly.newPlot('ExampleId', data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.8.3/plotly.min.js" integrity="sha512-dbAdoS/SyA/goUjoDL3nnizsyAkASCBwOmwVc8PbX287LjLnVSKmwbs0L49Z6lBTZu6UyCR/H3baviq/aO1dcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>Example of a Line Graph using Plotly.js</h1>

<div id="ExampleId"></div>

有关详细信息，请访问 Plotly.js Documentation

在本地主机 NodeJS 上查看图表

View plotly graph on localhost NodeJS

javascript

localhost

node.js

plotly

plotly.js