본문 바로가기
IT 프로그래밍 관련/streamlit 대시보드

streamlit multiselect를 이용하여 Chart 나타내기

by 지나는행인 2021. 3. 8.
728x90

이 전에 다뤘던 multiselect를 이용하여 사용자가 선택한 것만 차트로 나타내는 것이 가능하다.

 

물론 selectbox로도 가능하다.

 

차트로 나태나는 코드와 실행시 화면을 보겠다.

 

*visual studio code 화면

위는 코드화면이다.

라이브러리 주의사항으로는 서버에서 화면에 표시하기 위하여 matplotlib.use('Agg') 를 꼭 해 주어야한다.

 

위 코드는 lang_Data.csv 파일을 데이터프레임으로 가져와 df1의 변수에 저장하였고,

 

df1의 컬럼중 필요컬럼만 잘라내서, 멀티셀렉트의 선택사항으로 넣었다.

 

그리고 멀티셀렉트를 선택하면, line_chart 와 area_chart가 출력되도록 작업되었다.

 

if len( selected_lang_list ) != 0 :  이 부분은 선택하지 않아도 출력되는 차트의 영역을 없애고자,

 

(아무것도 선택하지 않았을 시 , 차트의 영역이 없이 아래 코드가 바로 실행될 수 있게끔.)

 

if문을 사용하였다.

 

 

아래는 위의 코드의 실행화면이다.

*실행화면

코드대로 실행되었음을 볼 수 있다. 아직 멀티셀렉트가 선택되지 않아, 새로운영역이라는 문구가 멀티셀렉트 바로 아래 위치한 것을 볼 수 있다.

if문 없이 다르게 작업되었다면, 자동으로 차트영역만큼 공간이 빠지고 더 아랫쪽에 문구가 위치하게 된다.

멀티셀렉트를 한번 선택하여 보겠다.

 

*multiselect 선택화면

'C'와 'BASIC' 을 선택하였고, 두가지에 대한 linechart, areachart 가 출력되는 것을 볼 수 있다.

다른것을 추가로 선택하면 같은차트위에 선택한 데이터값이 추가적으로 차트로 그려진다.

 

**새로운영역이라는 문구는 차트 아래 재 위치하는것을 볼 수 있다.

 

 

 

댓글