ドロップダウンメニューを使用して、2つの異なるデータセットをプロットにプロットします

フィルターチップ

2つの異なるデータセット(x0、y0)、(x1、y1)があります。2つのプロットを作成し、ドロップダウンメニューを使用してそれらから選択する必要があります。

私はこのコードを使用しています:

import plotly
import plotly.graph_objs as go
import random

x0 = [x for x in range(0,20)]
x1 = [x for x in range(5,100)]

y0 = [random.randint(0,20) for x in range(len(x0))]
y1 = [random.randint(0,50) for x in range(len(x1))]

trace1 = go.Scatter(x=x0,y=y0,line=dict(shape='vh'))
trace2 = go.Scatter(x=x1,y=y1,line=dict(shape='vh'))

data = [trace1,trace2]

updatemenus = list([
    dict(active=0,
         buttons=list([   
            dict(label = "4 Aug 1",
                 method = "update",
                 args= [data[0]]),
            dict(label = "4 Aug 2",
                 method = "update",
                 args= [data[1]])]))])


layout = dict(title="Dropdown",
              showlegend=True,
              xaxis=dict(title="Hours"),
              yaxis=dict(title="Number"),
              updatemenus=updatemenus)

fig=dict(data=data, layout=layout)

plotly.offline.plot(fig)

このコードを使用して、2つのデータセットを1つの領域にプロットしますが、これは実行したくありません。また、ドロップダウンメニューで適切なグラフを選択すると、適切なグラフを読み込めません。

glhr

問題は、トレースをに直接割り当てていることですargs代わりに、visibleプロパティを使用して、data表示されるトレースを制御する必要があります。

updatemenus = list([
    dict(active=0,
         showactive = True,
         buttons=list([   
            dict(label = "4 Aug 1",
                 method = "update",
                 args = [{"visible": [True, False]}]), # hide trace2
            dict(label = "4 Aug 2",
                 method = "update",
                 args = [{"visible": [False, True]}]) # hide trace1
            ]))])

ページがロードされたときに最初のトレースのみを表示する場合visibleは、2番目のトレースの属性を次のように明示的に設定する必要もありますFalse

trace1 = go.Scatter(x=x0,y=y0,line=dict(shape='vh'))
trace2 = go.Scatter(x=x1,y=y1,line=dict(shape='vh'), visible=False)
data = [trace1,trace2]

公式のPlotlyの例を参照してください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ドロップダウンメニューを使用して、2つの異なるデータセットをプロットにプロットします

分類Dev

grailsのブートストラップを使用してドロップダウンメニューにデータを入力します

分類Dev

セルの内容を使用してドロップダウンメニューリストを変更する

分類Dev

ドロップダウンメニューを使用してボタンのonclickイベントを作成する

分類Dev

2つの異なるデータフレームを使用して、積み上げ面積プロットにラインプロットを課します

分類Dev

javascriptを使用してクリックするたびにドロップダウンメニューから生成された画像をリセットします

分類Dev

Excel-1つのドロップダウンリストを使用して他のドロップダウンリストにデータを入力する

分類Dev

Javascript switchステートメントは、2つのドロップダウンメニューからデータを表示します

分類Dev

Googleドキュメント:別のスプレッドシートのデータを使用してドロップダウンリストを作成する

分類Dev

Vueのドロップダウンメニューを使用してテキストの色を変更する

分類Dev

ドロップダウンメニューを使用して、ノックアウトのある変数に値を割り当てます

分類Dev

Slackアプリはメッセージメニューのマルチセレクトドロップダウンをサポートしていますか?

分類Dev

ドロップダウンメニューをクリック可能にしてリダイレクトする

分類Dev

PHPとSQLを使用して、データベースからドロップダウンリストメニューに情報を挿入します

分類Dev

Javascript3ドロップダウンメニュー。1つのドロップダウンメニューを変更したら、他の2つのドロップダウンメニューのデフォルト値を設定します。最適化が必要

分類Dev

別のドロップダウンリストに基づいて1つのドロップダウンリストにデータを入力します

分類Dev

2つの動的ドロップダウンメニューを作成します

分類Dev

文字列のマップを使用して動的なドロップダウンメニューを作成する

分類Dev

リストを使用しないドロップダウンメニュー

分類Dev

ブートストラップ4:javascriptを使用してドロップダウンメニューを開く

分類Dev

異なるスタイルのブートストラップ ドロップダウン メニュー

分類Dev

他のドロップダウンの選択に基づいて、1つのドロップダウンリストにデータを入力します

分類Dev

ドロップダウンメニュー内の4つのタブをブートストラップします

分類Dev

タブ/タブセットにドロップダウンメニューを追加する方法[rmarkdown / bootstrap]

分類Dev

ドロップダウンメニューのフラッターでデフォルトとして選択された値を維持します

分類Dev

SQLステートメントのドロップダウンメニューからselectedItemを使用して、C#asp.netのテキストボックスにデータを入力しようとしています。

分類Dev

角度2/4のフィルターパイプを介してドロップダウンメニューからngForリストを変更します

分類Dev

Twitterブートストラップで2つのドロップダウンメニューを作成します

分類Dev

値のリストをオプションとして3つのドロップダウンメニューに渡します

Related 関連記事

  1. 1

    ドロップダウンメニューを使用して、2つの異なるデータセットをプロットにプロットします

  2. 2

    grailsのブートストラップを使用してドロップダウンメニューにデータを入力します

  3. 3

    セルの内容を使用してドロップダウンメニューリストを変更する

  4. 4

    ドロップダウンメニューを使用してボタンのonclickイベントを作成する

  5. 5

    2つの異なるデータフレームを使用して、積み上げ面積プロットにラインプロットを課します

  6. 6

    javascriptを使用してクリックするたびにドロップダウンメニューから生成された画像をリセットします

  7. 7

    Excel-1つのドロップダウンリストを使用して他のドロップダウンリストにデータを入力する

  8. 8

    Javascript switchステートメントは、2つのドロップダウンメニューからデータを表示します

  9. 9

    Googleドキュメント:別のスプレッドシートのデータを使用してドロップダウンリストを作成する

  10. 10

    Vueのドロップダウンメニューを使用してテキストの色を変更する

  11. 11

    ドロップダウンメニューを使用して、ノックアウトのある変数に値を割り当てます

  12. 12

    Slackアプリはメッセージメニューのマルチセレクトドロップダウンをサポートしていますか?

  13. 13

    ドロップダウンメニューをクリック可能にしてリダイレクトする

  14. 14

    PHPとSQLを使用して、データベースからドロップダウンリストメニューに情報を挿入します

  15. 15

    Javascript3ドロップダウンメニュー。1つのドロップダウンメニューを変更したら、他の2つのドロップダウンメニューのデフォルト値を設定します。最適化が必要

  16. 16

    別のドロップダウンリストに基づいて1つのドロップダウンリストにデータを入力します

  17. 17

    2つの動的ドロップダウンメニューを作成します

  18. 18

    文字列のマップを使用して動的なドロップダウンメニューを作成する

  19. 19

    リストを使用しないドロップダウンメニュー

  20. 20

    ブートストラップ4:javascriptを使用してドロップダウンメニューを開く

  21. 21

    異なるスタイルのブートストラップ ドロップダウン メニュー

  22. 22

    他のドロップダウンの選択に基づいて、1つのドロップダウンリストにデータを入力します

  23. 23

    ドロップダウンメニュー内の4つのタブをブートストラップします

  24. 24

    タブ/タブセットにドロップダウンメニューを追加する方法[rmarkdown / bootstrap]

  25. 25

    ドロップダウンメニューのフラッターでデフォルトとして選択された値を維持します

  26. 26

    SQLステートメントのドロップダウンメニューからselectedItemを使用して、C#asp.netのテキストボックスにデータを入力しようとしています。

  27. 27

    角度2/4のフィルターパイプを介してドロップダウンメニューからngForリストを変更します

  28. 28

    Twitterブートストラップで2つのドロップダウンメニューを作成します

  29. 29

    値のリストをオプションとして3つのドロップダウンメニューに渡します

ホットタグ

アーカイブ