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("""
""")
执行就可以看到:
的浏览器显示,如图
如何在 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 重修文字