我最终希望将数据从 python 数据结构传递到 Javascript 元素，这些元素将在 iPython Notebook 内的 Dygraphs 图中呈现它。
我不熟悉使用笔记本，尤其是 javascript/nobebook 交互。我的机器上本地保存了最新的 Dygraphs 库。至少，我希望能够使用该库在笔记本中呈现示例 Dygraphs 图。
请参阅下面的笔记本。我正在尝试使用此处提供的库执行简单的 Dygraphs 示例代码：http://dygraphs.com/1.0.1/dygraph-combined.js
但是，我似乎无法渲染任何内容。这是嵌入/调用库然后从笔记本中运行 javascript 的正确方法吗？
最终我想从 Pandas DataFrames 生成 JSON 并将该数据用作 Dygraphs 输入。
【问题讨论】：
标签： javascript python ipython ipython-notebook dygraphs
诀窍是将 DataFrame 传递给 JavaScript 并将其转换为 dygraphs 可以处理的format。这是我使用的代码 (notebook here)
html = """
<script src="http://dygraphs.com/dygraph-combined.js"></script>
<div id="dygraph" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
function convertToDataTable(d) {
var columns = _.keys(d);
columns.splice(columns.indexOf("x"), 1);
var out = [];
for (var k in d['x']) {
var row = [d['x'][k]];
columns.forEach(function(col) {
row.push(d[col][k]);
});
out.push(row);
}
return {data:out, labels:['x'].concat(columns)};
}
function handle_output(out) {
var json = out.content.data['text/plain'];
var data = JSON.parse(eval(json));
var tabular = convertToDataTable(data);
g = new Dygraph(document.getElementById("dygraph"), tabular.data, {
legend: 'always',
labels: tabular.labels
})
}
var kernel = IPython.notebook.kernel;
var callbacks = { 'iopub' : {'output' : handle_output}};
kernel.execute("dfj", callbacks, {silent:false});
</script>
"""
HTML(html)
这就是它的样子：
图表是完全交互式的：您可以像使用典型的 dygraph 一样进行悬停、平移、缩放和其他交互。
【讨论】：
kernel 的作用以及它在笔记本/javascript 交互中的作用吗？
kernel的更多信息，请参阅此博客文章：jakevdp.github.io/blog/2013/06/01/…
danvk 的解决方案比这更干净、更快速，但我也能够通过从 DataFrame 构建 Dygraph 字符串来使其工作。它似乎限制在大约 15K 点，但好处是一旦创建，页面可以保存为静态 html 页面，并且 Dygraphs 绘图保持原位。为那些没有设置笔记本的人提供了一个很好的便携式共享机制。
单元格：
%%html
<script type="text/javascript" src="http://dygraphs.com/1.0.1/dygraph-combined.js"></script>`
单元格：
import string
import numpy as np
import pandas as pd
from IPython.display import display,Javascript,HTML,display_html,display_javascript,JSON
df = pd.DataFrame(columns=['x','y','z'])x=np.arange(1200)
df.y=np.sin(x*2*np.pi/10) + np.random.rand(len(x))*5
df.z=np.cos(x)
df.x=df.y+df.z/3 + (df.y-df.z)**1.25
s=df.to_csv(index_label="Index",float_format="%5f",index=True)
ss=string.join(['"' + x +'\\n"' for x in s.split('\n')],'+\n')
dygraph_str="""
<html>
<head>
<script type="text/javascript" src="http://dygraphs.com/1.0.1/dygraph-combined.js"> </script>
</head>
<body>
<div id="graphdiv5" style="margin: 0 auto; width:auto;"></div>
<script type="text/javascript">
g = new Dygraph(
document.getElementById("graphdiv5"), // containing div
""" + ss[:-6] + """,
{
legend: 'always',
title: 'FOO vs. BAR',
rollPeriod: 1,
showRoller: true,
errorBars: false,
ylabel: 'Temperature (Stuff)'
}
);
</script>
"""
display(HTML(dygraph_str))
笔记本长这样：
【讨论】：
ss=json.dumps(s)。