plotly그래프 슬라이더 넣고, 수정하는 방법은?

2020. 4. 8. 06:30

plotly와 dash는 쉽게 인터랙티브가 가능한 그래프를 만들 수 있어 유용하다. 여러가지 입력 요소들도 추가할 수 있다. dash가 plotly에 텍스트박스나 슬라이더 등의 입력요소를 넣기 편하다. 하지만, plotly를 이용해서 그래프를 만들어야 하는 경우가 생겨 작업해 본 내용을 남겨두고자 한다. 오늘은 plotly그래프에 슬라이더를 넣고, 수정하는 방법에 대해서 알아보도록 하겠다.


plotly_그래프



plotly express문법을 사용하면, animation_frame에 칼럼명을 넣어서 쉽게 슬라이더바를 만들 수 있다. 하지만, 그리려는 그래프의 데이터를 매번 바꿔져야 하기 때문에 슬라이더를 별도로 넣기로 했다.


슬라이더는 아래와 같이 좌우로 값을 선택할 수 있는 긴 바이다. 이 바를 움직이는 것에 따라 그래프가 변해야 한다. 구조는 figure에 add_trade함수를 이용해서, 슬라이더의 값만큼 그래프를 추가해준다. 슬라이더를 옮길 때 나타나야 하는 그래프를 모두 그려서 figure에 넣어 놓는다고 생각하면 될 듯 하다. 개별로 그래프를 추가해도 되고 아래와 같이 for문을 이용해서 넣어도 된다.


1
2
3
4
5
6
7
8
9
10
11
12
13
fig=go.Figure()
step_list = list(range(0,50))
add_number=854
fig.update_layout(yaxis=dict(dtick=1, autorange="reversed"))
for step in step_list:
    temp, y_tickvals, y_ticktext=lotto.get_number(step+add_number)
    temp["level_0"].loc[temp["level_0"]==0= None
    fig.add_trace(
        go.Heatmap(x=temp["val"], y=temp["level_0"], z=temp["is"], zmid=0.5,
                    colorscale=[(0,"white"), (1,"blue")],
                    colorbar=dict(tickmode="array", tickvals=[0,1], ticktext=["","win"])))
    fig.update_layout(xaxis=dict(dtick=1,tick0=0.5,tickmode="array",
                      tickvals=x_tick_vals, ticktext=t, tickangle=0))
cs



다음에는 슬라이더에 들어가야 하는 값을 list자료형으로 만든다. 이 때 각각의 값에 원하는 문자나 스타일을 딕셔너리 형태로 넣어야 한다. 그런데, 이게 공식 튜토리얼에도 잘 정리되어 있지 않아 찾기가 애매하다.

visible은 위에서 그린 그래프 중에서 몇 번째 그래프를 보여줘야 하는지 나타난다. 보여줘야 하는 그래프의 위치에 해당하는 값에는 True, 나머지는 False로 넣으면 된다. title.text에 값을 넣으면 그래프 위에 제목이 나타난다. annotations.text는 어떤 값인지 확인을 하지 못했다. label은 슬라이더 바에 나타나는 값이다.


steps=[]

for idx, i in enumerate(step_list):

    step=dict(

        method="update",

        args=[{"visible":[False]*len(step_list)},

              {"title.text":"{}~{}th".format((i+add_number-20),(i+add_number))},

              {"annotations.text":"External %d" % i}

             ],

        label="{}~{}th".format((i+add_number-20),(i+add_number))

    )

    step["args"][0]["visible"][idx]=True

    steps.append(step)



슬라이더에 들어가야 하는 값을 리스트 자료형으로 만들었으면, 한 번 더 리스트에 딕셔너리 자료형으로 필요한 내용들을 추가하여 설정한다.

sliders=steps

sliders=[dict(active=10, currentvalue={"prefix":"game round:"}, steps=steps)]



마지막으로 update_layout함수를 이용하여 슬라이더를 추가하면 된다

fig.update_layout(sliders=sliders)


plotly_슬라이더_추가



슬라이더 값에 따라 y축이 변경되는 그래프를 그렸다. 그런데 처음에 그래프가 나타날 때 y축의 범위가 전체로 그래프가 그려진다. 이를 수정하고자 했으나, 생각보다 쉽지는 않았다. 큰 문제는 아니어서 일단 두기로 했다.


plotly그래프에 슬라이더를 추가하고 싶은 사람이 있다면, 도움이 되기를 바란다.

댓글()
  1. Favicon of https://woongnam.tistory.com BlogIcon Sommelier22 2020.04.08 18:50 신고 댓글주소  수정/삭제  댓글쓰기

    혹시 블로그 스킨 어디서 다운 받으셨나요 ?