当 jupyter notebook 转换为幻灯片时，绘图图不显示答案

【问题标题】：Plotly graph does not show when jupyter notebook is converted to slides当 jupyter notebook 转换为幻灯片时，绘图图不显示
【发布时间】：2017-01-01 09:02:13
【问题描述】：

我有一个带有交互式情节情节的 jupyter 笔记本。我正在使用nbconvert 将该笔记本转换为幻灯片。当我这样做时，情节图不会显示在幻灯片中。我也收到以下龙卷风警告

$ jupyter nbconvert presentation.ipynb --to slides --post serve
[NbConvertApp] Converting notebook presentation.ipynb to slides
[NbConvertApp] Writing 818538 bytes to presentation.slides.html
[NbConvertApp] Redirecting reveal.js requests to https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.1.0
Serving your slides at http://127.0.0.1:8000/presentation.slides.html
Use Control-C to stop this server
WARNING:tornado.access:404 GET /custom.css (127.0.0.1) 1.53ms
WARNING:tornado.access:404 GET /custom.css (127.0.0.1) 0.96ms
WARNING:tornado.access:404 GET /plotly.js (127.0.0.1) 0.84ms

为了雪上加霜，这昨天奏效了，我认为我没有改变任何实质性的东西。我尝试重新启动我的浏览器和我的机器，但都没有帮助。

【问题讨论】：

你知道如何让它工作吗？我有同样的保存到降价。
不，我从来没有让这个工作。

标签： python-3.x jupyter-notebook plotly reveal.js nbconvert

【解决方案1】：

在执行 nbconvert 的目录中必须有一个 plotly.js 文件。出于某种原因，“to html”会将 plotly javascript 嵌入到 HTML 文件中，但“to slides”会在目录中搜索 plotly.js 文件。

也就是说，您必须使用模板reveal.js 来根据绘图图表的大小更改幻灯片的尺寸。那，或自定义绘图图的尺寸。如果幻灯片太大（或相反），图表将在幻灯片中折叠成一条线。

【讨论】：

【解决方案2】：

1) 如果您通过 Jupyter 提供幻灯片，请检查 JS 控制台是否有错误和 Jupyter 日志。当您浏览 slides.html 时，您可能会得到
404 获取 /files/mydir/plotly.js

将plotly.js文件放到slides.html所在目录下（下载如https://cdn.plot.ly/plotly-latest.min.js并重命名为plotly.js）

2) 确保您在 Jupyter 笔记本中指定了布局高度和宽度，例如

trace_data = [trace1]
layout = Layout(
    autosize=False,
    width=720,
    height=480,
    margin=Margin(
        l=50,
        r=50,
        b=100,
        t=100,
        pad=4
    ),
    bargroupgap=0.3
)
fig = Figure(data=trace_data, layout=layout)

重新运行您的图表，检查它们是否正确显示在笔记本中，保存笔记本，重新运行 nbconvert。

您不需要自定义 custom.css 并制作 myreveal.tpl Reveal 模板并在 nbconvert 命令行中指定它，但如果您希望自定义幻灯片，可以这样做。

【讨论】：

谢谢！，只是把 plotly.js 文件对我有用。

【解决方案3】：

按照此处找到的代码：https://nbviewer.jupyter.org/format/slides/github/tarokiritani/testjupyter/blob/master/test%20plotly.ipynb#/

我发现将plotly.offline.init_notebook_mode(connected=True) 添加到与plotly.offline.(i)plot 功能相同的单元格中

【讨论】：