由于 Plotly.js 本身依赖于浏览器特性，在 Node.js 中直接使用时经常遇到类似的错误。如果你希望在 Node.js 中使用 Plotly.js，可以考虑配合 node-canvas 和 puppeteer 来解决渲染问题。

1. 使用 Puppeteer 渲染图表

你可以利用 Puppeteer 来控制一个无头浏览器，绘制图表并将其导出为图片。Puppeteer 会启动一个 Chromium 实例来渲染你的图表，并且可以直接保存为 PNG 或其他格式。

安装所需的依赖：

  1. 安装 puppeteer：
npm install puppeteer
  1. 安装 plotly.js：
npm install plotly.js

2. 在 Node.js 中生成图表并保存为 PNG

以下是一个示例，展示如何使用 puppeteer 来渲染 Plotly.js 图表，并将图表保存为 PNG 图片。

const puppeteer = require('puppeteer'); // 使用 puppeteer 来渲染图表
const fs = require('fs');

// 数据集
const trace1 = {
  x: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  y: [65, 59, 80, 81, 56, 55, 40],
  type: 'scatter', // 散点图
  mode: 'lines+markers', // 显示线条和标记
  name: 'My First Dataset',
  line: { color: 'rgb(75, 192, 192)' }
};

const data = [trace1];

// 布局设置
const layout = {
  title: 'Monthly Data',
  xaxis: {
    title: 'Month',
  },
  yaxis: {
    title: 'Value',
  }
};

const figure = {
  data: data,
  layout: layout,
};

async function generatePlot() {
  // 启动 Puppeteer
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 设置 HTML 页面
  await page.setContent(`
    <html>
      <head>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
      </head>
      <body>
        <div id="plot"></div>
        <script>
          const plotData = ${JSON.stringify(figure)};
          Plotly.newPlot('plot', plotData.data, plotData.layout);
        </script>
      </body>
    </html>
  `);

  // 等待页面加载完成并渲染图表
  await page.waitForSelector('#plot');

  // 将图表保存为 PNG
  const screenshotBuffer = await page.screenshot();
  fs.writeFileSync('chart.png', screenshotBuffer);

  console.log('Chart saved as chart.png');

  // 关闭浏览器
  await browser.close();
}

generatePlot();

代码解释：

  1. puppeteer.launch()：启动一个无头浏览器实例（Chromium）。
  2. page.setContent()：为浏览器页面设置内容，加载 Plotly.js 和图表的 HTML 内容。
  3. page.screenshot()：截取图表所在部分的屏幕截图，保存为 PNG 格式。
  4. fs.writeFileSync()：将截图保存为本地文件 chart.png。

运行：

运行代码后，你会得到一个 chart.png 文件，里面是渲染好的 Plotly 图表。

总结：

  • Plotly.js 在 Node.js 环境中直接使用会遇到依赖浏览器对象的问题。
  • 通过结合 puppeteer 和 Plotly.js，可以在无头浏览器中渲染图表并保存为静态图像（例如 PNG）。
  • 使用 puppeteer 让你能够在 Node.js 中生成交互式图表并导出为图片。