20 June 2020

Plotly - задача о двух графиках в Юпитере

В прощлый раз сделать интерактивными два графика, которые рисует matplotlib,как я показал - вовсе не тривиальна - они начинают плодиться.
Посмотрим как это же самое решается посредством библиотеки plotly.

Для начала импортируем нужные библиотеки:

import numpy as np
import ipywidgets as widgets
from IPython.display import clear_output

import plotly.graph_objects as go
from plotly.subplots import make_subplots


Функция вычисления у нас такая же:

x, y, y2  = [], [], []

def calc(f, phase):
    global x,y,y2
    x = np.linspace(0, 10, 100)
    y = np.sin(f * x + phase)
    y2 = np.cos(f * x + phase)

   
А вот графики в plotly создаются по-другому:

# создаем виджет для холста с двумы строками в одну колонку
fv = go.FigureWidget(make_subplots(rows=2, cols=1))

# создаем первый график - для y - он в первой строке
fv.add_trace(
    go.Scatter(x=x, y=y, name="yaxis data"),row=1,col=1
)

# создаем второй график - для y2 - он во второй строке
fv.add_trace(
    go.Scatter(x=x, y=y2, name="yaxis2 data"),row=2,col=1
)

# Устанавливаем название графика - Double Y Axis Example
fv.update_layout( title_text="Double Y Axis Example" )

# Делаем подпись оси x
# если не запомнить это в безликую переменную "_"
# то после выполнения этой команды
# сразу покажутся два пустых графика
_ =fv.update_xaxes(title_text="xaxis title")

   
Функция рисования теперь тоже отличается - нам нужно просто присвоить
данные графикам:

def plot_f(f, phase):
    global x,y,y2, fv
    calc(f, phase)
    fv.data[0].x = x
    fv.data[0].y = y
    fv.data[1].x = x
    fv.data[1].y = y2

   
В данном случае индекс идет по порядку добавления - мы добавили первым
первый график и он идет с индексом 0, а второй - с индексом 1.
Создание виджетов и обработчик кнопки не отличаются от таких же как в примере с matplotlib

И после их выполнения - т.е. выполнения последней строчки создания VBox мы увидим то, что нам нужно:




после того, как движками мы изменим значения и нажмем кнопку, график обновится:



При каждом новом нажатии кнопки график будет обновляться, но не рисоваться дополнительно.

No comments:

Post a Comment