我正在使用 FastAPI 创建一个简单的 Web 应用程序，我想在其中渲染 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.log(graphContainers);
if (graphContainers.length > 0) {
var graphContainer = graphContainers[0];
console.log(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。 使用fig.to_html直接将图表导出为HTML。 使用访问图形容器和设置事件侦听器的不同变体。 问题： 错误 TypeError: graphContainer.on is not a function 表明 graphContainer 元素没有 .on 方法。我不确定我是否访问了正确的元素，或者我初始化 Plotly 的方式是否存在问题。
问题： 如何在此 FastAPI 应用程序中为我的 Plotly 图表正确设置单击事件处理程序？任何帮助或建议将不胜感激。谢谢！
问题是，当
DOMContentLoadedoninitGraphClickHandler()幸运的是，
Plotly.react()plotly_clickthen()Plotly.react(...).then(gd => gd.on('plotly_click', clickHandler);