Обновление графика и текста plotly при нажатии на кнопку в django

Я хочу реализовать манипуляцию графом с помощью django. В частности, я хочу иметь возможность обновлять граф при нажатии на кнопку обновления и отображать текущий счетчик обновлений.

Ниже приведен простой взгляд на проблему.

enter image description here

Спасибо.

вот мой исходный код

Если есть какая-либо недостающая информация, пожалуйста, укажите на нее.

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <!--  plotly JS Files  -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
</head>

<body>
   <div id="update-num">0 update</div>
   <button type="submit" id="upadate-bt">update</button>
   <div class="graph" id="scatter-graph">{{ graph| safe }}</div>
</body>

</html>

graphdata.py

import numpy as np
import plotly.graph_objects as go

np.random.seed(2)

N = 10

def get_graphdata():
    x = np.random.rand(N)
    y = np.random.rand(N)
    return x, y

def get_scatter_figure():
    print('create figure')
    x, y = get_graphdata()
    fig = go.Figure()
    trace = go.Scatter(x=x, y=y, mode='markers')
    fig.add_trace(trace)
    fig.update_layout(title='graph title', width=500, height=500)
    fig.update_xaxes(title='x')
    fig.update_yaxes(title='y')
    trace.on_click(show_point)
    return fig

def show_point(trace, points, selector):
    print('cliked point')

views.py

from xml.etree.ElementInclude import include
from django.shortcuts import render
from . import graphdata

def index(request):
    fig = graphdata.get_scatter_figure()

    plot_fig = fig.to_html(fig, include_plotlyjs=False)
    return render(request, 'graph/index.html', {'graph':plot_fig})
Вернуться на верх