如何在iPython Notebook中渲染Dygraph？

2 投票

2 回答

1881 浏览

数据工程师

提问于 2025-04-18 12:52

我想把Python的数据结构里的数据传递给JavaScript元素，然后在iPython Notebook中用Dygraphs图表展示出来。

我刚开始使用Notebook，特别是JavaScript和Notebook之间的互动。我在本地电脑上保存了最新的Dygraphs库。至少，我希望能在Notebook中用这个库展示一个简单的Dygraphs图表。

请看下面的Notebook。我正在尝试执行一个简单的Dygraphs示例代码，使用这个库：http://dygraphs.com/1.0.1/dygraph-combined.js

但是，我似乎无法让任何东西显示出来。这是嵌入/调用库并在Notebook中运行JavaScript的正确方法吗？

notebook

最终，我想从Pandas的DataFrame生成JSON数据，并用这些数据作为Dygraphs的输入。

javascript json data visualization pandas interactive charts data binding ipython notebook dygraphs

2 个回答

danvk的解决方案比这个更简洁、更快，但我也能通过从数据框（DataFrame）构建一个Dygraph字符串来让这个方法奏效。这个方法似乎限制在大约15000个数据点，但好处是，一旦创建完成，页面可以保存为静态的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))

笔记本的样子是这样的：在这里输入图片描述

回答于 2025-04-18 由 Python大师

分享举报

这里的窍门是把数据表（DataFrame）传递给JavaScript，然后把它转换成dygraphs可以使用的格式。下面是我用的代码（这里有个笔记本）

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)

这就是它的样子：

使用dygraphs在IPython笔记本中渲染的图表

这个图表是完全互动的：你可以悬停、平移、缩放，和使用普通的dygraph一样进行各种操作。

回答于 2025-04-18 由 Python大师

分享举报

如何在iPython Notebook中渲染Dygraph？

2 个回答

撰写回答