如何压缩Plotly导出的HTML文件数据且无需解压即可直接打开？

当用Plotly导出包含大量数据的HTML图表时，文件体积可能会非常大——比如你提供的代码生成的HTML约30MB。虽然include_plotlyjs="cdn"能减少约3MB体积，但需要联网才能查看。以下是几种无需解压、直接打开就能查看的压缩方案：

方案1：数据降采样 #

如果图表的视觉效果对数据精度要求不高，直接对原始数据做降采样是最简便的方法，能大幅减少数据量，进而缩小HTML体积。

示例代码：

import numpy as np
import plotly.express as px

# 原始大数据
x = np.arange(0, 1e6)
y = np.sin(x)

# 降采样：每100个点保留1个（可根据需求调整采样率）
downsample_rate = 100
x_down = x[::downsample_rate]
y_down = y[::downsample_rate]

fig = px.line(x=x_down, y=y_down)
fig.write_html("myDownsampledPlot.html")

这种方法生成的HTML体积会显著减小，且完全离线可用，唯一缺点是会丢失部分数据细节。

方案2：压缩HTML内的图表数据 #

通过压缩图表的JSON数据，并在HTML中嵌入解压脚本，既能保留全部数据，又能大幅缩小文件体积。具体步骤是用zlib压缩数据，再通过前端脚本自动解压渲染。

示例代码：

import numpy as np
import plotly.express as px
import zlib
import base64
import json

x = np.arange(0, 1e6)
y = np.sin(x)

fig = px.line(x=x, y=y)
# 将图表转为JSON格式
fig_json = fig.to_json()
# 用zlib高压缩比压缩JSON数据
compressed_data = zlib.compress(fig_json.encode('utf-8'), level=9)
# 转成base64方便嵌入HTML
b64_compressed = base64.b64encode(compressed_data).decode('utf-8')

# 自定义HTML模板，包含解压脚本和Plotly渲染逻辑
# 若需完全离线，可将Plotly.js的本地代码嵌入模板替代cdn链接
html_content = f"""
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>
    <div id="plot-container"></div>
    <script>
        // 解压并渲染图表
        const compressed = atob('{b64_compressed}');
        const decompressedJson = pako.inflateRaw(compressed, {{to: 'string'}});
        const figData = JSON.parse(decompressedJson);
        Plotly.newPlot('plot-container', figData.data, figData.layout);
    </script>
</body>
</html>
"""

# 写入HTML文件
with open("myCompressedPlot.html", "w", encoding="utf-8") as f:
    f.write(html_content)

这种方法能将原始30MB的HTML压缩到10MB以内，且保留全部数据，打开时浏览器会自动完成解压渲染。如果需要完全离线使用，只需把Plotly.js和pako.js的本地代码嵌入到HTML中即可。

方案3：使用plotly-resampler库 #

plotly-resampler是专门为大数据量Plotly图表设计的工具，它会自动对数据进行动态采样：初始加载时显示低精度数据，用户缩放图表时自动加载对应区域的高精度数据，兼顾体积和交互体验。

首先安装库：

pip install plotly-resampler

示例代码：

import numpy as np
from plotly_resampler import FigureResampler, px

x = np.arange(0, 1e6)
y = np.sin(x)

# 创建带采样功能的图表
fig = px.line(x=x, y=y)
resampled_fig = FigureResampler(fig)

# 导出HTML，支持离线查看（可选include_plotlyjs参数）
resampled_fig.write_html("myResampledPlot.html", include_plotlyjs="cdn")
# 若需完全离线，可设置include_plotlyjs="directory"，会将Plotly.js保存到本地目录

这种方案生成的HTML体积小，且交互时能查看数据细节，是处理大数据量Plotly图表的最优选择之一。

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