77983


python+streamlitで、短期間にWebアプリを作ろうとしてします。  
又、短いコードで描画を行えるライブラリとして、plotlyを候補にしています。そこで、件名の質問に至った次第です。

現状は、自由に描画できる機能を探し出せていません。グラフに特化した描画機能のみです  
(これはplotlyの目的がそうだからかもしれません)。  
ので、何とか自由に描画を行えないか探しています。

"自由に描画"する処理とは、下記の通りです。  
・実在しない地図画像を1枚 Webブラウザのクライアント領域に描く  
・その上に、●と直線を数百本描く  
・上述は、Google Mapのようの拡縮と指定移動ができるようにする  
・●と直線は、クリックで操作できるようにする

plotlyで出来ないなら、「皆様が経験済」のお勧めのライブラリを教えて頂けると幸いです。

※極力自分で調べましたが、調査時間が無い為 経験者の皆様の知恵をお借りしたい次第です。

【環境】  
python3.9  
streamlit 0.83.0  
Win10 20H2  
仮想環境 未使用

どうぞよろしくお願いします。


CC BY-SA 4.0
2021-07-05T03:04:57.060
77980
2022-01-11T06:58:39.777
2022-01-11T06:58:39.777
3060
question
python python3 plotly-python
plotly には、自由に点や線や画像を描画する機能はあるでしょうか？


「plotlyでCanvasに自由に描画」する機能はあります。  
[点や線](https://plotly.com/python/shapes/)や[画像](https://plotly.com/python/images/)を描画可能です。  
しかしサンプルコードの通りグラフに特化した描画機能の延長で描画しているので、若干無理やりな感じは否めません。

目的や用途、そしてPythonコードのみで解決すべきかThree.jsなどjavascript側の描画フレームワークを使って良いのかなどの条件を質問文に追記していただけるとより的確な回答を得やすいかもしれません。

コメントにあるように「利用者が自由に描画」できる仕組みは[streamlit-drawable-
canvas](https://discuss.streamlit.io/t/drawable-canvas/3671)などのライブラリが用意されています。

**サンプルコード**

[code]

    import plotly.graph_objects as go
    
    fig = go.Figure()
    
    # Create scatter trace of text labels
    fig.add_trace(go.Scatter(
        x=[1, 1.75, 2.5],
        y=[1, 1, 1],
        text=["$Stack$", "$Stackoverflow$", "$overflow$"],
        mode="text",
        textfont=dict(
            color="black",
            size=18,
            family="Arail",
        )
    ))
    
    # Update axes properties
    fig.update_xaxes(
        showticklabels=False,
        showgrid=False,
        zeroline=False,
    )
    
    fig.update_yaxes(
        showticklabels=False,
        showgrid=False,
        zeroline=False,
    )
    
    # Add image
    fig.add_layout_image(
        dict(
            source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png",
            x=0.8,
            y=0.65,
        ))
    
    fig.update_layout_images(dict(
            sizex=0.3,
            sizey=0.3,
            xanchor="left",
            yanchor="top" 
    ))
    
    # Add circles
    fig.add_shape(type="circle",
        line_color="blue", fillcolor="yellow",
        x0=0, y0=0, x1=2.25, y1=2
    )
    fig.add_shape(type="circle",
        line_color="gray", fillcolor="orange",
        x0=1.25, y0=0, x1=3.5, y1=2
    )
    
    # Add rect
    fig.add_shape(type="rect", x0=0,y0=0.178,x1=3.5,y1=1.83)
    
    fig.update_shapes(opacity=0.3, xref="x", yref="y")
    
    fig.update_layout(
        margin=dict(l=20, r=20, b=100),
        height=600, width=800,
        plot_bgcolor="white" 
    )
    
    fig.show()
    
[/code]

![サンプルコード実行結果](https://i.stack.imgur.com/n5fyH.png)


CC BY-SA 4.0
2021-07-05T05:24:46.633
77983
2021-07-05T05:24:46.633
9820
77980
answer