### Jupyter Notebook 中使用 `%%JavaScript` 魔法命令绘制图表不显示的原因及解决方案 在 Jupyter Notebook 中，`%%JavaScript` 魔法命令允许用户直接嵌入 JavaScript 代码。然而，如果图表未能正确显示，可能与以下原因有关： 1. **内核未正确加载 JavaScript** 如果 Jupyter Notebook 的内核没有正确加载所需的 JavaScript 库或文件，图表将无法渲染。例如，某些可视化库（如 ECharts 或 D3.js）需要预先加载其对应的 JavaScript 文件[^1]。 2. **魔法命令的执行环境限制** 在 Jupyter Notebook 中，`%%JavaScript` 魔法命令仅在当前单元格中生效。如果 JavaScript 代码依赖于其他单元格中的变量或数据，可能会导致图表无法正确生成[^5]。 3. **浏览器兼容性问题** 某些较旧版本的浏览器可能无法支持最新的 JavaScript 特性，从而导致图表无法正常显示。确保使用最新版本的现代浏览器（如 Chrome 或 Firefox）[^2]。 4. **Jupyter Notebook 的配置问题** 如果 Jupyter Notebook 的配置不正确，可能导致 JavaScript 渲染失败。例如，`CurrentConfig.NOTEBOOK_TYPE` 未正确设置为 `NotebookType.JUPYTER_NOTEBOOK` 或 `NotebookType.JUPYTER_LAB`[^1]。 ### 解决方案 以下是解决该问题的具体方法： #### 方法一：确保 JavaScript 文件已加载 在使用 `%%JavaScript` 命令之前，需确保所有必要的 JavaScript 文件已加载到 Notebook 中。可以通过以下方式实现： ```python from pyecharts import options as opts from pyecharts.charts import Bar from pyecharts.globals import CurrentConfig, NotebookType # 设置 Notebook 类型 CurrentConfig.NOTEBOOK_TYPE = NotebookType.JUPYTER_NOTEBOOK # 加载 JavaScript Bar().load_javascript() ``` #### 方法二：检查 Jupyter Notebook 的内核状态 如果内核未正确加载 JavaScript 文件，可以尝试重启 Jupyter Notebook 的内核。具体步骤如下： 1. 点击菜单栏中的 `Kernel`。 2. 选择 `Restart Kernel`。 3. 重新运行相关单元格。 #### 方法三：验证浏览器兼容性 确保使用的是支持最新 JavaScript 特性的现代浏览器。如果仍然存在问题，可以尝试清除浏览器缓存或更换浏览器测试[^2]。 #### 方法四：调整 Jupyter Notebook 的配置 如果问题仍未解决，可以手动调整 Jupyter Notebook 的配置以确保 JavaScript 正常加载。例如： ```python from pyecharts.globals import CurrentConfig # 设置在线主机地址 CurrentConfig.ONLINE_HOST = "https://cdn.jsdelivr.net/npm/echarts@latest/dist/" ``` #### 方法五：避免在同一单元格中混合 Python 和 JavaScript 如果在同一单元格中同时使用 Python 和 JavaScript 代码，可能会导致冲突。建议将 Python 和 JavaScript 代码分开到不同的单元格中执行[^3]。 --- ### 示例代码 以下是一个完整的示例，展示如何在 Jupyter Notebook 中使用 `%%JavaScript` 绘制图表： ```python # Step 1: 加载必要的 Python 库并初始化配置 from pyecharts import options as opts from pyecharts.charts import Bar from pyecharts.globals import CurrentConfig, NotebookType CurrentConfig.NOTEBOOK_TYPE = NotebookType.JUPYTER_NOTEBOOK Bar().load_javascript() ``` ```javascript // Step 2: 使用 %%JavaScript 魔法命令绘制图表 %%javascript require.config({ paths: { echarts: 'https://cdn.jsdelivr.net/npm/echarts@latest/dist/' } }); require(['echarts'], function (echarts) { var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; myChart.setOption(option); }); ``` --- ###