Plotly Python中fig.to_html()导出HTML时数字被二进制编码导致浏览器渲染异常的问题求助

问题背景 #

我在使用Plotly Python库导出图表为HTML片段时，遇到了数据被二进制编码导致浏览器渲染错误的问题，以下是详细情况：

环境版本

• Python: 3.12.11
• Plotly: 6.0.1
• Pandas: 2.2.3
• Numpy: 2.3.1

复现代码

import pandas as pd
import plotly.express as px

data = [
    {"date": "2023-01-01", "value": 10},
    {"date": "2023-02-01", "value": 15},
    {"date": "2023-03-01", "value": 12}
]
df = pd.DataFrame(data)

fig = px.line(x=df['date'].to_list(), y=df['value'].to_list())

html_snippet = fig.to_html(
    include_plotlyjs=False,
    full_html=False,
)
print(html_snippet)

问题现象 #

运行这段代码后，查看输出的HTML片段，会发现y轴数据被编码成了二进制格式：

"y":{"dtype":"i1","bdata":"Cg8M"}

这里的Cg8M是10、15、12的二进制表示，但因为我没有在HTML中包含Plotly.js，浏览器无法解析这种编码格式，导致渲染图表时y轴显示为0、1、2，完全偏离了实际的10、15、12。我期望的格式应该是直接的明文数组形式：

"y": [10, 15, 12]

解决方案 #

要解决这个问题，我们需要强制Plotly以明文数组的形式导出数据，避免二进制编码。这里有两种可靠的实现方法：

方法1：使用plotly.io.to_html禁用二进制数据

Plotly的plotly.io.to_html方法提供了专门的参数来控制二进制编码，设置use_binary_data=False即可强制使用明文数组：

import plotly.io as pio

# 保留原图表创建代码
fig = px.line(x=df['date'].to_list(), y=df['value'].to_list())

# 关键：添加use_binary_data=False参数
html_snippet = pio.to_html(
    fig,
    include_plotlyjs=False,
    full_html=False,
    use_binary_data=False
)
print(html_snippet)

方法2：手动转换为Python原生列表

在导出HTML前，手动将图表trace中的y轴数据转换为Python原生列表（避免numpy类型触发二进制编码逻辑）：

# 创建图表后，强制修改trace数据类型
fig = px.line(x=df['date'].to_list(), y=df['value'].to_list())
fig.data[0].y = df['value'].tolist()  # 替换为Python原生列表

# 再导出HTML
html_snippet = fig.to_html(
    include_plotlyjs=False,
    full_html=False,
)
print(html_snippet)

验证结果 #

使用任意一种方法后，导出的HTML片段中y轴数据都会变为明文数组：

"y": [10, 15, 12]

此时浏览器就能正确解析数据，渲染出y轴为实际值10、15、12的图表了。

内容来源于stack exchange