时间戳

首页 > 解决方案 > 如何在 Plotly 中单击图像时更改图像？

javascript - 如何在 Plotly 中单击图像时更改图像？

问题描述

在我的应用程序中，我需要在单击图像时更改图像。我怎样才能做到这一点？

文件夹结构：

- app.py
- assets/
    |-- custom-script.js

应用程序.py

app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Img(
            className="myImg",
            id="speak_btn",
            src="assets/img/microphone.png",


              style={},
            ),

])

自定义脚本.js

$(document).ready(function () {
    $(".myImg").click(function () {
        if ($(this).attr("src") === "assets/img/microphone.png")
            $(this).attr("src", "assets/img/voice_gif.gif");
        else if ($(this).attr("src") === "assets/img/voice_gif.gif")
            $(this).attr("src", "assets/img/microphone.png");
    })
});

这是了解我为什么将其放在资产文件夹中的指南 https://dash.plotly.com/external-resources

经过custom-script.js测试并且可以正常工作。需要帮助使其适应破折号。谢谢

标签： javascriptpythonplotlyplotly-dash

解决方案

您可以app.clientside_callback()像这样运行 JS 客户端：

import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([

    html.Img(id='speak_btn', src='assets/img/microphone.png', className='myImg', n_clicks_timestamp=0)

])

app.clientside_callback(
    """
    function(click, src) {
        if ( src == 'assets/img/microphone.png' && click != 0 ) {
            return 'assets/img/voice_gif.gif';
        } else {
            return 'assets/img/microphone.png';
        }
    }
    """,
    Output('speak_btn', 'src'),
    [Input('speak_btn', 'n_clicks_timestamp')],
    [State('speak_btn', 'src')]
)

if __name__ == '__main__':
    app.run_server()

你也可以在没有 JS 的情况下完成这个任务，方法是编写一个回调来更改每次更新的src属性，如下所示：html.Imgn_clicks_timestamp

import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)

microphone = 'assets/img/microphone.png'
voice_gif = 'assets/img/voice_gif.gif'

app.layout = html.Div([

    html.Img(id='speak_btn', src=microphone, className='myImg', n_clicks_timestamp=0)

])

@app.callback(
    Output('speak_btn', 'src'),
    [Input('speak-btn', 'n_clicks_timestamp')],
    [State('speak_btn', 'src')])
def change_img(click, src):

    if not click: raise PreventUpdate

    return gif if src==microphone else microphone

if __name__ == '__main__':
    app.run_server()

推荐阅读