如何修复VSCode中IPython.display的显示异常问题

核心原因 #

你遇到的串位问题，本质是带JavaScript的HTML文件（比如ECharts）存在全局DOM元素ID冲突。ECharts这类依赖JS渲染的图表，通常会通过固定ID的DOM容器初始化（比如<div id="chart"></div>），而Jupyter里的JavaScript是全局执行的——当第二个单元格的JS代码执行时，会找到第一个单元格里已经存在的相同ID容器，把新图表渲染到旧容器里，导致自身单元格无输出、内容跑到第一个单元格。纯HTML没有JS操作DOM，所以不会有这个问题。

解决办法 #

解决的核心是确保每个HTML文件的图表容器ID唯一，同时对应JS初始化代码里的ID也同步修改，有两种实现方式：

1. 手动修改HTML文件

直接打开echarts.html和echarts2.html，分别修改容器ID和JS里的引用：

• echarts.html中：
  将<div id="chart"></div>改为<div id="chart1"></div>，同时把JS里的echarts.init(document.getElementById("chart"))改为echarts.init(document.getElementById("chart1"))
• echarts2.html中：
  同理改为<div id="chart2"></div>和echarts.init(document.getElementById("chart2"))

修改后再运行原代码，两个单元格就能正常独立显示。

2. Python代码动态修改ID（无需手动改HTML文件）

如果不想修改原始HTML文件，可以在Python中读取文件内容后，动态替换ID：

第一个单元格代码：

from IPython.display import display, HTML
import ipywidgets

# 定义批量替换ID的函数
def render_unique_chart(html_file, unique_id):
    with open(html_file, encoding="utf-8") as f:
        html_content = f.read()
    # 替换容器ID和JS中的ID引用
    html_content = html_content.replace('id="chart"', f'id="{unique_id}"')
    html_content = html_content.replace('document.getElementById("chart")', f'document.getElementById("{unique_id}")')
    
    out = ipywidgets.Output()
    with out:
        display(HTML(html_content))
    return out

# 渲染第一个图表
out_1 = render_unique_chart("echarts.html", "chart_001")
out_1

第二个单元格代码：

# 渲染第二个图表，用不同的唯一ID
out_2 = render_unique_chart("echarts2.html", "chart_002")
out_2

额外说明 #

这个问题和VSCode、Jupyter Lab无关，本质是JS全局作用域下的ID冲突导致的——只要是运行在Jupyter环境中（不管是Lab还是VSCode的Notebook），都会出现这个问题，解决思路都是确保每个图表的DOM容器ID唯一。

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