inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js + TypeScript 완벽 가이드

차트 라이브러리 설치 및 실행 확인

Getting Started가 안되시는 분들 이렇게 코드 바꿔보세요

335

대현

작성한 질문수 39

5

강의가 촬영된 시점으로 부터 5개월 정도 지나서인지 chart.js 코드가 조금 바뀐 것 같습니다. 강의를 따라했는데 타입 문제가 있어서 잘 안되더라구요. stackoverflow에서 3가지 방법을 제시해줬는데 그 중 첫 번째와 두 번째를 시도해봤는데 모두 잘 되었고, 가장 간단했던 두번째 해결법을 아래에 남겨둡니다.  

<script lang="ts">
import Vue from "vue";
import { ChartConfiguration } from "chart.js";
import Chart from "chart.js/auto";

export default Vue.extend({
  mounted() {
    const labels = ["January", "February", "March", "April", "May", "June"];
    const data = {
      labels: labels,
      datasets: [
        {
          label: "My First dataset",
          backgroundColor: "rgb(255, 99, 132)",
          borderColor: "rgb(255, 99, 132)",
          data: [0, 10, 5, 2, 20, 30, 45],
        },
      ],
    };
    const config: ChartConfiguration = {
      type: "line",
      data,
      options: {},
    };
    const ctx = (
      document.getElementById("myChart") as HTMLCanvasElement
    ).getContext("2d") as CanvasRenderingContext2D;
    var myChart = new Chart(ctx, config);
  },
});
</script>

vuejs typescript

답변 1

1

캡틴판교

오 대현님, 제가 확인이 늦었네요 :) Chart.js가 업데이트 되었군요! 추후 강의 업데이트 해놓겠습니다 :) 다른 분들을 위해 문제 해결 방법을 공유해 주셔서 감사해요 :) 대현님 짱짱!!

composition API에서의 ref

1

247

2

Vue3 + Typescript + Vite + Pinia 참조

3

1859

2

mutation 함수 이름을 enum으로 관리하는 이유

1

350

2

this.todoItem 타입이 any 라고 나옵니다

1

401

1

프로젝트 실행 시 오류가 발생합니다.

1

589

2

두번째 프로젝트 권한 요청 드립니다.

1

373

2

강의자료 ? 노트?

1

359

2

vuex 사용시 mapper 보다는 그냥 쓰는 것이 낫다고 하셨는데요..

1

289

2

권한 허가 부탁드립니다!

1

413

2

Chart.js(3.9.1버전) 안되시는분들 이렇게 해보세요

1

873

2

두번째 프로젝트 권한 요청 드립니다.

1

379

2

두번째 프로젝트 권한 요청드립니다.

1

456

3

두번째 프로젝트 권한 요청 합니다.

1

341

1

두번째 프로젝트 npm i && npm run serve에러 납니다..

1

497

2

두번째 프로젝트 권한 요청 드립니다

1

467

1

두번째 프로젝트 권한 요청 드립니다

1

420

2

두번쨰 프로젝트 권한요청

1

415

3

두번째 프로젝트 권한 요청

1

365

2

두번째 프로젝트 권한부탁드립니다.

1

336

1

권한요청 드립니다.

1

334

1

두번째 프로젝트 권한 요청 드립니다.

1

345

1

project.d.ts 파일관련 문의사항

2

407

2

권한요청입니다.

1

372

2

두번째 프로젝트 권한요청

1

204

2