했던 일

신 그래프 생성기
htps : // k-Ken. 기주 b. 이오
Vue.js + vue-chartjs + git hub-pages ( + Vuetify )
로 간단한 그래프(꺾은 선・원・봉)를 쓸 수 있는 SPA를 만들었습니다.
리포지토리 : htps : // 기주 b. 코 m / k - 카렌 /

신 그래프란?

요전날, Twitter에서 화제가 된 연수입 400만엔과 800만엔의 비교의 그래프나,
옛부터 재료가 된 Windows version의 그래프 등 비교적 간단한 그래프입니다.

샘플

사용법

① - 각 행을 삭제할 수 있습니다 (교환 기능은 구현하지 않습니다)
② - 표시(⑦)한 화상이 표시되는 영역, 画像を非表示にする 에서 숨길 수 있습니다.
③ - 행을 추가할 수 있습니다.
④ - 이 버튼의 좌측의 color의 input form에 넣은 색으로 색을 통일할 수 있습니다
⑤ - 모든 행색을 무작위로 되돌립니다.
⑥ - localStorage에 그래프를 저장합니다. 위의 드롭다운 목록에서 읽을 수 있습니다.
⑦ - png로 페이지 오른쪽(화면이 좁으면 페이지 하단)에 그래프를 출력합니다
⑧ - 선택한 localStorage 데이터를 삭제합니다.
⑨ - 그래프의 타입(바/꺾은선/원)을 바꿀 수 있습니다(폼의 데이터는 사라집니다)



상한·하한은, 그 폼의 값보다 위의 항목의 값의 최대·최소치가 우선됩니다.
그래프의 상한 = max (항목의 상한, 상한 폼의 값)
그래프의 하한 = min (항목의 하한, 하한 폼의 값)

사용 예

일단 홈 화면에 추가하면 오프라인에서도 사용할 수 있으며,
localStorage를 이용하여 Save도 할 수 있으므로,
언제든지 자신의 스마트 폰에 빌어 먹을 그래프를 축적 할 수 있습니다.

참고 링크 등

Vue.js, git hub-pages

상위 및 하위 구성 요소의 양방향 바인딩
htps : // 이 m/사 2K에 ght/있어 ms/544b3f157108b96033훗
(꺾은 선 그래프의 색만, rgba로 받을 수 있도록 했습니다만,
그 component를 만들 때 참고했습니다)

travis에서 gh-pages에 자동 배포
htps : // 이 m / 두어 p / ms / 010 A8 A 7c278 f0107520
(기사는 nuxt의 것이지만, vu에서도 설정하는 것은 거의 동일했습니다)

내 기사입니다 (vue.config.js를 설정하자는 기사)
htps : // 이 m/k-카렌/있어 ms/9c8b38f54509369c5946

vue-chartjs

vue-chartjs
htps : // ゔ 에 쨩 rtjs. rg/
component를 부르는 방법 사용법만은 이것을 보면 알 수 있습니다

chartjs
htps //w w. 찬 rtjs. rg/
실제로는 입력한 수치 이외에도 option을 이것저것 설정하고 있습니다만,
option에 대해서는 vue-chartjs의 사이트에는 그다지 자세하게 타고 있지 않으므로,
chartjs쪽을 참고로 하거나 매번 구구했습니다.

마지막으로

구현 내용을 소개하려고 생각했지만 (특별한 것은별로 없기 때문에),
코드가 너무 더럽고 힘들었기 때문에 포기했습니다.
만든 것을 배포해 공개하는 것은 처음이므로, 이르지 못하는 점 있을까 생각합니다만,
문제 등 있으면 보고 주시면 힘이 미치는 범위에서는 수정하고 싶습니다.
여러분도 적극적으로 수치를 가시화하여 신 그래프를 양산,
최고의 신 그래프 라이프를 보내 주시면 좋겠습니다.
여기까지 읽어 주신 분들께 감사드립니다.