Plotly Sunburst图表标记图案在Datapane报告中不显示的问题

问题原因 #

Datapane的dp.Plot组件在处理Plotly图表时，可能会过滤或不支持marker.pattern这类高级样式配置，导致填充图案丢失。而直接用Plotly生成的HTML文件能完整保留所有样式，因此显示正常。

解决方案 #

方案1：用HTML组件嵌入完整Plotly图表 #

绕过dp.Plot的格式转换，直接将图表导出为HTML字符串，通过dp.HTML组件嵌入，可完整保留所有样式：

#!/usr/bin/env python

import plotly.graph_objects as go
import datapane as dp
import plotly.io as pio

# 生成旭日图
fig = go.Figure(
    go.Sunburst(
        labels=["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
        parents=["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"],
        values=[65, 14, 12, 10, 2, 6, 6, 4, 4],
        branchvalues="total",
        textfont_size=16,
        marker=dict(
            pattern=dict(
                shape=["", "/", "/", ".", ".", "/", "/", ".", "/"], solidity=0.9
            )
        ),
    )
)

fig.update_layout(margin=dict(t=0, l=0, r=0, b=0))
fig.write_html("sunburst_test.html")

# 将图表转为HTML字符串并嵌入Datapane报告
fig_html = pio.to_html(fig, full_html=False)
view = dp.Blocks(dp.HTML(fig_html))

dp.save_report(view, path="sunburst_test_dp_fixed.html")

方案2：升级Datapane到最新版本 #

旧版本Datapane可能对Plotly的新特性支持不足，执行以下命令升级：

pip install --upgrade datapane

升级后再尝试用原代码的dp.Plot嵌入，验证填充图案是否正常显示。

方案3：静态图片嵌入（备选，失去交互性） #

如果上述方法无效，可将图表导出为静态图片（PNG/SVG）后嵌入，缺点是会丢失Plotly的交互功能：

#!/usr/bin/env python

import plotly.graph_objects as go
import datapane as dp

# 生成旭日图
fig = go.Figure(
    go.Sunburst(
        labels=["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
        parents=["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"],
        values=[65, 14, 12, 10, 2, 6, 6, 4, 4],
        branchvalues="total",
        textfont_size=16,
        marker=dict(
            pattern=dict(
                shape=["", "/", "/", ".", ".", "/", "/", ".", "/"], solidity=0.9
            )
        ),
    )
)

fig.update_layout(margin=dict(t=0, l=0, r=0, b=0))
# 导出为图片
fig.write_image("sunburst_pattern.png")

# 嵌入图片到Datapane报告
view = dp.Blocks(dp.Image("sunburst_pattern.png"))
dp.save_report(view, path="sunburst_test_dp_image.html")

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