이번에 시도하려는 포인트

프런트 엔드에서 쉽게 그리는 방법을 찾는다

메모

Chart.js에서 시도하려고합니다.
→Vue.js와의 공존(vue.js로부터 Chart.js를 호출하는 방법 new로 인스턴스 만들고 있는?)의 방법을 모르겠습니다.
　→다른 방법을 시도한다. gstatics라는 google 그리기 라이브러리가있는 것 같습니다. 이것을 사용합시다.

데이터: 배열의 데이터 만들기
그리기 장소 : html의 ID로 지정
그래프의 종류:메소드로 지정
로 갈 수 있었다.
　오히려 bootstrap에서 곤란했기 때문에 메모.

  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <div id="stage"></div>  
    </div>
  </div>

이것이라면 ↓



⇒ 이렇게 작지 않아도 좋다.

다음은

  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
    </div>
      <div id="stage"></div>  
  </div>

이 패턴이라면

⇒오른쪽으로 들렀다.

밖으로 나가면,

  <div class="row my-3">

    <div class="col-sm-6 mx-auto">
    </div>
  </div>
      <div id="stage"></div> 

⇒잘 사이즈에 좋게 바뀌어 주었다.

그래프를 풀이 아닌 10 칼럼 분 (bootstrap 쓰는 방법) 취하면,

  <div class="row my-3">

    <div class="col-sm-6 mx-auto">
    </div>
  </div>
      <div class="col-lg-10 mx-auto" id="stage"></div>  

참고로 한 사이트

그리기 부분
bootstrap 부분