[英]Plotly (offline) for Python click events
我需要在Jupyter的Plotly(脫機)中獲得單擊事件。
我想處理此問題的方式是使用javascript和以下命令將值返回給python:
var kernel = IPython.notebook.kernel;
kernel.execute(command);
...其中命令將類似於variable = xxxxx
(就像這里 )
我陷入嘗試的開始,試圖用python在HTML中繪制圖表(注意,我可以通過這種方式成功加載jQuery):
from IPython.display import HTML
HTML('''
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<h3>Gráfico</h3>
<hr>
<div id="myDiv"></div>
<script>
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: 'markers'
};
var trace2 = {
x: [2, 3, 4, 5],
y: [16, 5, 11, 10],
mode: 'lines'
};
var trace3 = {
x: [1, 2, 3, 4],
y: [12, 9, 15, 12],
mode: 'lines+markers'
};
var data = [ trace1, trace2, trace3 ];
var layout = {};
Plotly.newPlot('myDiv', data, layout);
</script>
</body>
</html>
''')
錯誤消息是:
ReferenceError:未在UA(jquery.min)的Function.globalEval(jquery.min.js:2)的eval()的eval()的eval(globalEval(jquery.min.js:2)、: 21:17)上定義Plotly .js:3)位於n.fn.init.append(jquery.min.js:3)在OutputArea._safe_append(outputarea.js:456)在OutputArea.append_execute_result(outputarea.js:493)在OutputArea.append_output(outputarea) .js:326)在OutputArea.handle_output(outputarea.js:257)在輸出(codecell.js:382)
我已經設法從這個答案中獲得點擊點
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
import plotly.graph_objs as go
from plotly import tools
import pandas as pd
import numpy as np
from datetime import datetime
init_notebook_mode(connected=True)
from IPython.core.display import display, HTML
N = 30
random_x = np.random.randn(N)
random_y = np.random.randn(N)
Chosen = []
# Create a trace
trace = go.Scatter(
x = random_x,
y = random_y,
mode = 'markers'
)
data = [trace]
# Plot and embed in ipython notebook!
plot = plot(data, filename='basic-scatter', include_plotlyjs=False, output_type='div')
divId=plot.split("id=\"",1)[1].split('"',1)[0]
plot = plot.replace("Plotly.newPlot", "var graph = Plotly.newPlot")
plot = plot.replace("</script>", """
var graph = document.getElementById('"""+divId+"""');
var color1 = '#7b3294';
var color1Light = '#c2a5cf';
var colorX = '#ffa7b5';
var colorY = '#fdae61';
var kernel = IPython.notebook.kernel;
;graph.on('plotly_selected', function(eventData) {
var x = [];
var y = [];
var colors = [];
for(var i = 0; i < %i; i++) colors.push(color1Light);
eventData.points.forEach(function(pt) {
x.push(pt.x);
y.push(pt.y);
colors[pt.pointNumber] = color1;
var comando = 'Chosen.append((' + pt.x + ', ' + pt.y + '))'
console.log(comando);
kernel.execute(comando);
});
Plotly.restyle(graph, 'marker.color', [colors], [0]);
});
""" % N)
display(HTML(plot))
在此示例中,我們能夠在Javascript和Python之間進行雙向通信 。 請注意,創建圖表的數據來自Python。 選擇點之后,我將一個元組附加到Chosen
變量中,該變量屬於Pythhon范圍。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.