如何在PyScript中实现Plotly图表点击事件以获取坐标？

你的问题出在：通过json.dumps将Python端的Plotly图表对象转为JSON，再用JS的Plotly.newPlot渲染时，Python端绑定的on_click事件会丢失——因为此时渲染的是JS层面的图表实例，Python端的事件绑定无法作用于它。下面提供两种可行的解决方法：

方法一：通过JS事件监听实现（适配JSON转译的场景） #

直接给图表的DOM元素绑定plotly_click事件，在PyScript中处理事件回调：

<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
    <py-config>
        packages = ['plotly','numpy','pandas']
    </py-config>
</head>
<body>
    <div id="chart1"></div>
    <py-script>
        import js, json, plotly
        import plotly.express as px

        fig = px.line(x=[1,2, 3], y=[1, 2, 3]) 
        graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
        plot = js.Plotly.newPlot("chart1", js.JSON.parse(graphJSON))

        def handle_click(event):
            # 提取点击的坐标点
            for point in event.points:
                print(f"点击坐标：x={point.x}, y={point.y}")

        # 获取图表DOM元素并绑定点击事件
        chart_element = js.document.getElementById("chart1")
        chart_element.addEventListener("plotly_click", handle_click)
    </py-script>
</body>
</html>

说明：plotly_click是Plotly提供的原生JS事件，事件对象的points属性包含所有被点击的数据点信息，你可以从中提取x、y坐标等参数。

方法二：用Plotly原生Python渲染（更简洁） #

跳过JSON转译步骤，直接用Plotly的Python API将图表渲染到指定div，这样可以保留Python端的事件绑定：

<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
    <py-config>
        packages = ['plotly','numpy','pandas']
    </py-config>
</head>
<body>
    <div id="chart1"></div>
    <py-script>
        import plotly.express as px
        from plotly.io import show

        def select_params(trace, points, selector):
            # 提取点击的坐标
            x = points.xs[0]
            y = points.ys[0]
            print(f"点击坐标：x={x}, y={y}")

        fig = px.line(x=[1,2, 3], y=[1, 2, 3]) 
        # 给trace绑定点击事件
        fig.data[0].on_click(select_params)
        # 渲染到指定div
        show(fig, config={"responsive": True}, include_plotlyjs="cdn", div_id="chart1")
    </py-script>
</body>
</html>

说明：plotly.io.show支持直接将Python端的图表对象渲染到指定的div，此时Python端绑定的on_click事件可以正常触发，points参数包含点击点的x、y数组（取第一个元素即可获取单次点击的坐标）。

内容的提问来源于stack exchange，提问作者Manuel Schmidt