MotionBoard 충전도를 만들어 봤어요.
Motionboard는 다양한 그래프를 준비했습니다.
도표를 잘 조합하거나 무언가와 조합하면 재미있는 표현을 할 수 있다.
이번에는'충전 그래프'다.나는 목표 달성률 등의 진전을 표현하는 데 쓰일 수 있다고 생각한다.
만들어진 느낌은 다음과 같다.(gif 애니메이션이라 귀엽지만 실제로는 더 유창하다.)
단순한 그래프 표현보다는'충전'을 흉내내는 것이 귀엽고 미련스러울 수 있다.이번에는 이 충전 도표의 제작 방법을 소개해 주세요.
이 기사를 읽어주시는 분.
· BI 도구를 사용하는 사람 (MotionBoard 뿐만 아니라 전체)
• 더 많은 그래프의 표현 방법을 알고 싶은 사람
• 어떻게 된 건지 모르겠지만 방법을 알고 싶은 사람
• 디자인을 중시하는 사람
프로비저닝
충전 도표의 구성은 다음과 같다.
①배터리의 이미지 항목
② 차트 항목 - 단일 직선 게이지
※ 녹색 충전량 게이지 부분
이상은 이 두 개입니다.
아, 그렇구나!그렇게 생각하는 사람은.. 그렇다고 생각해요.
나는 이곳에서 모든 프로젝트의 제작을 상세하게 발굴하고 싶다.
배터리의 이미지 항목
우선 파워포인트로 소재를 제작한다.
배터리 자체는 도형의 조합을 통해 제작할 수 있다.
이 두 개의 사각형은 오른쪽의 작은 사각형이 뒤쪽이어서 동시에 효과적으로 페인트를 칠한다
이런 느낌은 매우 간단하다.
그러나
반드시 주의해야 할 것은'색깔'의 배합이다
뭐?
사용하고자 하는 판의 배경색과 배터리가 충전되지 않은 부분의 충전 색을 배합해야 한다.
색상 배합을 위해 RGB 수치를 세밀하게 설정하는 것은 솔직히 고통스럽다.
(배터리가 충전되지 않은 부분의 색깔은 판과 무관해야 합니다! 이 경우 문제가 없습니다.)
따라서 다음과 같은 방법을 사용하면 비교적 수월할 수 있다.
먼저 복사판의 배경 부분을 건전지 소재를 만드는 PowerPoint에 붙여넣습니다.
※ 데스크톱 화면의 모든 영역을 포착하려면 [Win 키] + [Shift] + [S]를 사용하십시오.
위의 그림은 배터리를 설정할 준비를 하는 부분으로 판의 배경 부분이다.
Power Point에 붙여넣습니다.
배터리 재료로 사용할 사각형을 마우스 오른쪽 버튼으로 클릭하고 그래픽 형식을 선택합니다.
[그래픽 옵션]의 [채우기]의 [색상]에 [색상 선택기]가 있습니다. 이 옵션을 선택합니다.
어느 부분의 색을 인용합니까?를 참고하십시오.
방금 붙인 판의 배경 부분에 스포트라이트를 맞추면 배터리의 배경 부분의 색깔이 변합니다.
다음은 배터리의 오른쪽+극을 대표하는 사각형 부품을 채우지만 역사상 방금 채색기로 선택한 색깔이 남아 있어 선택을 통해 색깔 오차를 없앨 수 있다.
완성된 건전지는 아래의 그림이다.
여기서도 시간이 좀 걸려요.
건전지 주위의 색깔.이 건전지를 복사해서 페인트로 붙이면...
이런 느낌이에요.
지금은 배경을 알기 쉬운 파란색으로 바꿨다.
이렇게 하면 운동판에 이 그림을 사용하면 배경 부분이 떠오른다.(이곳에서 말한 배경색의 회색과 파란색은 분리된 상태이다)
따라서 Power Point에 다른 그래픽을 삽입하여 배터리 소재 뒤에 설정합니다.보드 배경색과 같은 색으로 색상을 채웁니다.
이렇게 배경을 담은 재료를 페인트 등 이미지 소프트웨어에 복사해 저장하면 배터리 재료가 완성된다.
이것을 MotionBoard의 인상 종목으로 바둑판에 추가하면 OK입니다.
일직선 게이지
단일 직선 게이지의 사용 방법은 다음 URL을 참조하십시오.(MotionBoard 설명서)
단일 직선 게이지의 사용 방법과 각종 설정
데이터 소스 정보
단직선 도표의 데이터 원본
기본적으로 차트에는 통계 항목의 첫 번째 항목이 표시됩니다.
이번에 나는 계산 항목 [목표 달성률]을 설정하여 계산 공식의 결과를 0~1의 값으로 설정했다.충전도라서 0~100% 범위에서 표시하고 싶어요.100분율로 이것을 표현하는 방법은 도표 메뉴의 설정으로 설명한다.
차트 편집
그럼 직선 도표가 표시될 것 같아요.
지금부터 도표 편집의 미세한 조정을 진행합니다.주요 설정은 다음과 같다.
0공통 설정 - 배경: 차트 전체의 배경을 투명하게 만들기
0 단일 디스플레이 설정 - 단일 직선 게이지
• 표시 방향, 단위, 표시 값, 표시 눈금, 표시 색상, 배경판
게이지 배율, 게이지 색상, 색상 및 글꼴 크기는 위 그림과 같은 모양입니다.
표 색상의 경우 중고가는 각각 #10AC10, #10CC10, #80FA80입니다.
이곳은 취향에 따라 색깔을 바꾸는 것도 재미있다.
그래디언트 정도(어디까지 낮은가? 어디부터 높은 색상까지?)게이지 배율에 따라 설정할 수 있습니다.
나는 색깔을 별로 바르지 않은 것 같다.
그래프 메뉴에서 100분율로 표시하기
그래프 메뉴는 마우스를 그래프 위에 놓으면 위에 나타나는 메뉴다.
톱니바퀴 로고를 클릭하면'축의 설정','합계 항목의 포맷'두 개를 클릭할 수 있다.
먼저 축의 설정부터 시작합니다.
설정할 곳은 축의 고정뿐입니다.[입력한 최소/최대값으로 고정]을 설정하고 [0]~1]에서 값을 설정합니다.
다음은 통계 항목의 형식입니다.
백분율을 선택하고 소수점 이하 자릿수를 2로 설정하고 백분율에서%를 설정합니다.
이러한 설정은 100분의 백분율로 표시됩니다.
여기서 단일 선 차트 설정을 종료합니다.
배터리 항목 및 일직선 그래프의 위치 조정
두 항목을 겹쳐서 충전 도표로 삼다.
배터리 항목을 배경 처리로 하고 배경이 투명한 일직선도를 겹치면 된다.
배터리 항목의 설정 화면은 다음과 같다.
일반 탭 - 항목에 고정/고정해제 를 선택하고 창 설정에서 배경 처리로 를 선택합니다.이 단계에서 위치와 사이즈를 대체적으로 결정하면 충전 도표의 사이즈감이 결정된다.이미지가 원하는 크기에 표시되지 않으면 이미지 레이블 - 이미지 확대/축소 및 종횡비 유지를 유효하거나 유효하지 않게 설정하여 조정할 수 있습니다.
배터리 항목의 위치를 결정한 후 단직선도의 위치를 결정한다.
주요하다
• 차트 속성을 열어 일반 탭 - 위치 및 크기 조정
• 차트 열기 단일 선 표시 설정 편집 - 단일 선 게이지 내의 전체 너비 축척 전체 높이 축척
이 두 가지 방법을 통해 마이크로 조정을 진행하여 전지 항목에 적합하게 하다.
특히 직선 단일 차트의 값을 표시하는 경우 배터리 항목이 수치를 덮어쓰지 않도록 조정이 필요하므로 조금씩 조정해 볼 수 있다.
미세 조정이 순조롭다면 충전도가 완성될 것이다.
최후
충전 도표의 제작 방법을 소개했다.
나는 도표 프로젝트의 조합을 통해 다양한 게임 방법이 있고 보는 사용자들을 즐겁게 할 수 있다고 생각한다.세상에는 아직도 독특한 BI 도구의 표현 방법이 많은데 그 중 하나에 충전 도표를 넣을 수 있다면 좋겠다.
Reference
이 문제에 관하여(MotionBoard 충전도를 만들어 봤어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yoshi_b/items/8b41ef113e876fc66649텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)