如何将Plotly.js图表导出为带动态交互的HTML网页？

Plotly.js 本身没有像 Python 版本那样内置的 write_html() 方法，但可以通过手动构建HTML模板并导出的方式，实现保留交互功能的HTML文件共享，以下是两种常见场景的实现方式：

浏览器端直接导出下载 #

如果是在浏览器环境中创建的图表，可以通过以下步骤生成并下载交互式HTML文件：

1. 获取已渲染图表的完整配置数据
2. 构建包含Plotly CDN和图表渲染代码的HTML模板
3. 通过Blob对象生成下载链接

示例代码：

// 假设你的图表渲染在id为"myChart"的DOM元素中
const chartContainer = document.getElementById('myChart');
// 将图表数据、布局、配置转为JSON格式
const chartConfig = Plotly.toJSON(chartContainer);

// 构建完整的HTML内容
const htmlTemplate = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交互式Plotly图表</title>
    <!-- 引入Plotly.js CDN -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div id="exportedChart" style="width: 100%; height: 600px;"></div>
    <script>
        // 渲染导出的图表
        const exportedChartData = ${chartConfig};
        Plotly.newPlot('exportedChart', exportedChartData.data, exportedChartData.layout, exportedChartData.config);
    </script>
</body>
</html>
`;

// 创建Blob并触发下载
const htmlBlob = new Blob([htmlTemplate], { type: 'text/html' });
const downloadUrl = URL.createObjectURL(htmlBlob);
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
downloadLink.download = 'interactive-plotly-chart.html';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadUrl);

Node.js环境下生成HTML文件 #

如果是在Node.js环境中使用Plotly.js（比如通过plotly.js-dist包），可以直接通过文件系统模块写入HTML文件：

示例代码：

const fs = require('fs');
const Plotly = require('plotly.js-dist');

// 定义图表数据和布局
const chartData = [
    { x: [1, 2, 3, 4], y: [10, 15, 13, 17], type: 'line', name: '数据系列1' },
    { x: [1, 2, 3, 4], y: [16, 5, 11, 9], type: 'line', name: '数据系列2' }
];
const chartLayout = { title: '交互式折线图', xaxis: { title: 'X轴' }, yaxis: { title: 'Y轴' } };

// 构建HTML内容
const htmlContent = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Node.js导出的Plotly图表</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 100%; height: 600px;"></div>
    <script>
        Plotly.newPlot('chart', ${JSON.stringify(chartData)}, ${JSON.stringify(chartLayout)});
    </script>
</body>
</html>
`;

// 写入HTML文件
fs.writeFileSync('exported-chart.html', htmlContent);
console.log('交互式HTML图表已生成');

注意事项 #

• 生成的HTML文件依赖Plotly.js CDN，只要网络正常就能加载并渲染交互图表，保留所有原生交互功能（缩放、悬停提示、图例切换等）
• 如果需要离线使用，可以将Plotly.js的本地文件引入到HTML中，替换CDN链接即可

内容的提问来源于stack exchange，提问作者AnonymousVanRabbit