FastAPI: как обрабатывать события щелчков графика Plotly в веб-приложении?
Я использую FastAPI для создания простого веб-приложения, в котором я хочу отображать график Plotly и записывать значения (x, y) при нажатии на график. Я экспортирую график, а затем пытаюсь настроить обработчик событий для кликов.
Вот соответствующая часть моего кода FastAPI:
new_html = """
<div id='divPlotly'></div>
<script>
var plotly_data = {}
Plotly.react('divPlotly', plotly_data.data, plotly_data.layout);
</script>
""".format(
fig.to_json())
return templates.TemplateResponse(
"graph.html", {"request": request, "graph_html": new_html}
)
Я также попробовал экспортировать непосредственно в HTML:
graph_html = fig.to_html(full_html=False)
return templates.TemplateResponse(
"graph.html", {"request": request, "graph_html": graph_html}
)
Мой HTML-файл (graph.html) выглядит так:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Graph</title>
<script src = "https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id = "graph-container">
{{ graph_html | safe }}
</div>
<script>
// Function to initialize Plotly graph click event handler
function initGraphClickHandler() {
var graphContainers = document.getElementsByClassName('plot-container plotly');
console.info(graphContainers);
if (graphContainers.length > 0) {
var graphContainer = graphContainers[0];
console.info(graphContainer);
graphContainer.on('plotly_click', function(data) {
var point = data.points[0];
var x = point.x;
var y = point.y;
var text = `Clicked Point: X=${x}, Y=${y}`;
alert(text);
});
}
}
document.addEventListener('DOMContentLoaded', initGraphClickHandler);
</script>
</body>
</html>
Однако я столкнулся со следующей ошибкой в консоли:
TypeError: graphContainer.on is not a function
at initGraphClickHandler (visualize:88:36)
at Object.success (visualize:49:25)
at c (jquery-3.6.0.min.js:2:28327)
at Object.fireWith [as resolveWith] (jquery-3.6.0.min.js:2:29072)
at l (jquery-3.6.0.min.js:2:79901)
at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js:2:82355)
Что я пробовал:
Экспорт графика в JSON и последующее использование Plotly.react. Непосредственный экспорт графика в HTML с помощью fig.to_html. Использование различных вариантов доступа к контейнеру графа и настройке прослушивателя событий. Проблема: Ошибка TypeError:graphContainer.on is not a function предполагает, что элементgraphContainer не имеет метода .on. Я не уверен, получаю ли я доступ к правильному элементу или возникла проблема с инициализацией Plotly.
Вопрос: Как я могу правильно настроить обработчик событий щелчка для моего графика Plotly в этом приложении FastAPI? Любая помощь или предложения будут очень признательны. Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Дело в том, что div графа все еще не обработан, когда срабатывает событие DOMContentLoaded (и метод on не был зарегистрирован в объекте DOM при запуске initGraphClickHandler()).
К счастью, Plotly.react() возвращает обещание , которое разрешается, когда div графа «готов», а обратный вызов успеха получает его в качестве параметра, поэтому вы можете добавить обработчик plotly_click в нужный момент, используя then() и без необходимости запрашивать DOM. элемент.
Например (непосредственно в части кода FastAPI):
Plotly.react(...).then(gd => gd.on('plotly_click', clickHandler);
Примечание. Больше не используйте plotly-latest.js или его мини-версию. Хотя кое-где в документации все еще упоминаются, они застряли на версии 1.58.5.
Обратите внимание, что начиная с версии 2 «последние» выходные данные больше не будут обновляться в CDN и останутся в последнем патче v1 v1.58.5. Поэтому, чтобы использовать CDN сplotly.js v2 и выше, необходимо указать точную версиюplotly.js.
Например :
<script src = "https://cdn.plot.ly/plotly-2.34.0.js"></script>