카테고리

질문 & 답변
세부 분야

프론트엔드
해결 여부

미해결

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

21.07.02 02:35 작성 조회수 247

강의가 촬영된 시점으로 부터 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>