在 localhost NodeJS 上查看绘图图答案

【问题标题】：View plotly graph on localhost NodeJS在 localhost NodeJS 上查看绘图图
【发布时间】：2022-01-05 21:17:44
【问题描述】：

有什么方法可以在 NodeJS 中生成一个绘图图并在 localhost 而不是 HTML 中查看它？如果有，怎么做？如果没有，那么我可以通过哪些其他方式创建图表并在 NodeJS 中查看它们？

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

【问题讨论】：

在本地主机而不是 HTML 中查看它是什么意思？您尝试过什么？
您的意思是在 html 中嵌入图表以在 localhost 中显示，但在您的 html 代码中它将是一个 div 或一些标签？
还有你想要什么样的图表
我想在NodeJS中使用Plotly，然后查看在服务器上生成的图，比如localhost。
我并不是要粗鲁，但你有理由希望它出现在 nodejs 中吗？我的意思是它在 javascript 中更简单、更高效，因为您可以编辑 javascript 文件中的代码，这将只更改客户端代码而不是您的服务器。它也更容易和更快，因为在 nodejs 中你需要一个 api 密钥。此外，当您使用 cdn 时，您可以节省服务器空间，因为它会在客户端设备上加载，您可以选择所需的版本，而不是在 nodejs 中安装和卸载版本。

标签： javascript node.js plotly localhost plotly.js

【解决方案1】：

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

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

优点：

只要您的设备在运行，它就一直在运行。

缺点：

您需要一个 API 密钥。
您需要一个 Plotly 帐户。
您必须从您的政体帐户中获取 URL。节点.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代码并编辑您要更改的值。
运行你的代码！

优点：

您不需要帐户。
服务器空间更小。
在客户端工作，因此不会损害您的服务器。
选择您要运行的版本。
所有内容都保存在您的 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

【讨论】：