Plotly (в автономном режиме) для событий щелчка Python - PullRequest
Новая
       11

Plotly (в автономном режиме) для событий щелчка Python

0 голосов
/ 31 августа 2018

Мне нужно получать события кликов в Plotly (офлайн) в Jupyter.

Я думаю об этом, используя javascript и следующую команду для возврата значений в python: 

var kernel = IPython.notebook.kernel;
kernel.execute(command);

... где команда будет выглядеть примерно так: variable = xxxxx (точно так же, как здесь )

Я застрял в начале своей попытки, пытаясь построить диаграмму в HTML на python (заметьте, что я могу успешно загрузить 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: График не определен at eval (eval at globalEval (jquery.min.js: 2),: 21: 17) в eval () в Function.globalEval (jquery.min.js: 2) в ua (jquery.min.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)

1 Ответ

0 голосов
/ 31 августа 2018

Мне удалось получить баллы за клики из этого ответа 

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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...