ipython notebook如何运行_如何优雅地在 IPython Notebook 中使用 ECharts

0x00 前言

Pythonista 在做一些数据探索，数据分析和数据可视化工作的时候，往往会选择 IPython / Pandas / Numpy / Seaborn

IPython / Pandas / Numpy 都挺好，就是 Seaborn/Matplotlab 丑了点。

在可视化方面，能不能选一个好用的可视化库呢？有，ECharts

熟悉 ECharts 的你跳了出来。这不是 JS 库嘛，你准备在 IPython 中使用？

是的，今天就准备在 IPython Notebook 里面使用 ECharts

本文目录如下

▼ 如何优雅地在 IPython Notebook 中使用 ECharts : section

0x00 前言 : section

▼ 0x01 IPython Notebook 如何使用 JavaScript : section

如何引入 HTML : section

如何在 IPython Notebook 中运行 Javascript : section

▼ 引入 JavaScript 的三种方式 : section

方法 1: 写 Header 标签法 : section

方法 2: 动态创建 Script 标签法 : section

方法 3: RequireJS 法 : section

0x02 效果 : section

0x03 代码 : section

0x04 结论 : section

0xEE 参考文档 : section

0x01 IPython Notebook 如何使用 JavaScript

如何引入 HTML

IPython Notebook 中，我们知道，可以通过 IPython.display 导入 HTML.

from IPython.display import HTML

HTML("""

这是一小块 HTML

""")

执行就可以看到：

这是一小块 HTML

的浏览器显示，如图

如何在 IPython Notebook 中运行 Javascript

答案是使用 javascript magic method

引入 JavaScript 的三种方式

如何在 IPython 中引用 ECharts ? 有三种方式在 Header 或者 Body 写 Script 标签。

动态创建 Script 标签引入

使用 RequireJS 动态引入一个一个看

方法 1: 写 Header 标签法

在 Head 或者 Body 写 Script 标签。优点：简单暴力，无非就是找到对应的 header 所在的模板(位于notebook/template/page.html)，然后在 header 里写 script 标签。

缺点：修改默认的 python 包，不便于分享

修改之后

接着执行 javascript 代码就好了

方法 2: 动态创建 Script 标签法

类似于下面动态引入。

window.loadJS = function(url, implementationCode, location){

var scriptTag = document.createElement('script');

scriptTag.src = url;

scriptTag.onload = implementationCode;

scriptTag.onreadystatechange = implementationCode;

location.appendChild(scriptTag);

};

loadJS('https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js', renderCharts, document.body);

var renderCharts = function(){

var option = {

title: {

text: '直接编写 JavaScript'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

var myChart = echarts.init(document.getElementById('nest_chart'));

myChart.setOption(option);

}

方法 3: RequireJS 法

第三个方法看起来比较突兀，但 RequireJS 是 IPYNB 管理 JS 模块的基础库。

借助它，可以更加方便的动态引入并执行 JS.

原理嘛，就是进阶版本的方法 2

分别在两个 Cell 里面执行下面代码

%%javascript

requirejs.config({

paths: {

echarts: '//cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts', // strip .js ^, require adds it back

}

});

%%javascript

element.append('

(function(element) {

requirejs(['echarts'], function(echarts) {

var option = {

title: {

text: '直接编写 JavaScript'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

var myChart = echarts.init(document.getElementById('nest_chart'));

myChart.setOption(option);

return {};

});

})(element);

0x02 效果

通过方法三, 很容易得到如下的图

这个时候问题就来了, 日常情况都是Python代码分析结果为一个字典结构的数据. 怎么放到Option 里面呢? 答案是 JSON. 如图

TIPS：Python 和 Javascript 共享 Option 变量 的时候实际上是共享 JSON 字符串。

0x03 代码

0x04 结论

在 IPYNB 中也有懒人解决方案，比如：

但作为一个前后端都懂一些的人来说，本文提到的方法三可以直接从官网取对应的 JavaScript 代码进行可视化，这样灵活性更高一些。

0xEE 参考文档RequireJS 的官网

ECharts 官网

ChangeLog:2016-09-15 发布

2019-04-03 重修文字