Plotly生成的直方图HTML过大，如何去除原始数据并保留交互性？

你的问题核心是Plotly默认会把原始数据集嵌入HTML，导致体积膨胀。其实只要用直方图生成后的分箱统计结果重新构建图形，就能在保留交互性的前提下大幅缩小文件体积。

方法一：用分箱统计数据生成交互式柱状图 #

柱状图的交互体验和直方图几乎一致，且只需要存储7个分箱的计数和区间数据：

import plotly.express as px
import numpy as np

# 原始数据生成（这一步仅用于计算分箱，最终不会嵌入HTML）
s = np.random.normal(0., 1., 100000)

# 先生成临时直方图获取分箱统计结果
temp_fig = px.histogram(s, nbins=7)
bin_counts = temp_fig.data[0].y
xbins = temp_fig.data[0].xbins

# 计算分箱中心（用于x轴标签展示）
bin_edges = np.arange(xbins.start, xbins.end + xbins.size, xbins.size)
bin_centers = (bin_edges[:-1] + bin_edges[1:]) / 2

# 用统计数据生成柱状图
fig = px.bar(x=bin_centers, y=bin_counts, labels={'x': '数值', 'y': '计数'})
# 对齐原直方图的x轴范围，保证视觉一致
fig.update_xaxes(range=[xbins.start, xbins.end])

# 导出HTML，此时文件体积仅几KB
fig.write_html('fig.html', include_plotlyjs='cdn', full_html=False)

方法二：直接修改原直方图的数据源 #

如果坚持要保留直方图的类型（而非柱状图），可以直接替换原figure的数据源，移除原始数据：

import plotly.express as px
import numpy as np
import plotly.graph_objects as go

s = np.random.normal(0., 1., 100000)
fig = px.histogram(s, nbins=7)

# 提取分箱统计信息
xbins = fig.data[0].xbins
bin_counts = fig.data[0].y
bin_edges = np.arange(xbins.start, xbins.end + xbins.size, xbins.size)
bin_centers = (bin_edges[:-1] + bin_edges[1:]) / 2

# 替换原始数据为分箱统计结果，保持直方图的交互特性
fig.data = [go.Histogram(
    x=bin_centers,
    y=bin_counts,
    histfunc="count",
    xbins=xbins,
    name=fig.data[0].name
)]

# 导出
fig.write_html('fig.html', include_plotlyjs='cdn', full_html=False)

原理说明 #

Plotly生成直方图时，已经完成了分箱计数的计算，这些统计结果（仅7组数据）完全足够还原图形。我们只需要丢弃原始的10万条数据，用统计结果重新构建图形，就能在保留悬停、缩放等交互功能的同时，把HTML体积从1.9MB压缩到几KB。

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