Pygal在Jupyter笔记本中呈现SVG
问题描述:
我目前使用Jupyter笔记本,并且希望通过HTML呈现SVG,而不是将它们保存为本地SVG并在之后显示它们。使用此代码Pygal在Jupyter笔记本中呈现SVG
林:
%matplotlib inline
from IPython.display import SVG, HTML
html_pygal = """
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/svg.jquery.js"></script>
<script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/pygal-tooltips.js"></script>
<!-- ... -->
</head>
<body>
<figure>
{pygal_render}
</figure>
</body>
</html>
"""
import pygal
line_chart = pygal.Line()
line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013))
line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3])
line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5])
HTML(html_pygal.format(pygal_render=line_chart.render()))
这里的问题是:虽然Jupyter设法使SVG文件还显示JavaScript错误,它看起来像如下:
B'\ n
* SVG图片来这里
' Javascript错误添加输出! 语法错误:非法字符 查看您的浏览器Javascript控制台了解更多详情。
当检查浏览器控制台,这是错误消息:
loaded custom.js 2017-04-20_analytics.ipynb:121:15
Default extension for cell metadata editing loaded. main.min.js:24261:9
Raw Cell Format toolbar preset loaded. main.min.js:24347:5
Slideshow extension for metadata editing loaded. main.min.js:24395:9
actions jupyter-notebook:find-and-replace does not exist, still binding it in case it will be defined later... main.min.js:29204:17
load_extensions Arguments { 0: "jupyter-js-widgets/extension", 2 weitere… } main.min.js:12231:9
Session: kernel_created (b51341fe-f4d8-42be-a9b8-46ac47476a99) main.min.js:23547:13
Starting WebSockets: ws://localhost:8888/api/kernels/1852f19e-52f2-4ce2-91d8-f6276ea95b40 main.min.js:22833:9
Loading extension: jupyter-js-widgets/extension main.min.js:12208:21
Kernel: kernel_connected (1852f19e-52f2-4ce2-91d8-f6276ea95b40) main.min.js:22480:13
Kernel: kernel_ready (1852f19e-52f2-4ce2-91d8-f6276ea95b40) main.min.js:22480:13
loaded widgets extension.js:134:14
Widget backend and frontend versions are compatible extension.js:32280:22
SyntaxError: illegal character
Stack-Trace:
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:4231
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:21389
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:18980
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20345:13
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20372:9
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20218:17
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20165:9
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:21820:21
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23440:13
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:5486
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23467:20
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23304:24
Kernel.prototype._handle_ws_message/this._msg_queue<@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23295:39
main.min.js:20347:13
SyntaxError: illegal character
Stack-Trace:
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:4231
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:21389
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:18980
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20345:13
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20372:9
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20218:17
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20165:9
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:21820:21
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23440:13
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:5486
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23467:20
[email protected]://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23304:24
Kernel.prototype._handle_ws_message/this._msg_queue<@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23295:39
我的Python版本:3.6.0 操作系统:Windows 7 64位 Pygal版本:2.3.1
注意:我当前的解决方法,但不是我正在寻找的解决方案是创建一个本地SVG,然后显示它与库导入:from IPython.display import display
答
尝试你SE“is_unicode =真”里面呈现,就像这样:
HTML(html_pygal.format(pygal_render=line_chart.render(is_unicode=True)))
答
更妙的是:
bar_chart = pygal.Bar()
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
display({'image/svg+xml': bar_chart.render()}, raw=True)
对于多一点澄清:它显示Jupyter笔记本电脑的SVG,但我想摆脱的javascript用于演示目的的错误消息。 – MBUser