• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

23.07.31 20:47 작성 23.07.31 21:07 수정 조회수 466

1

<template>
  <div>
    <canvas id="myChart" width="400" height="400"></canvas>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Chart, registerables } from "chart.js";

Chart.register(...registerables);

export default Vue.extend({
  mounted() {
    const ctx = (
      document.getElementById("myChart") as HTMLCanvasElement
    ).getContext("2d");

    if (ctx) {
      const myChart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
            {
              label: "# of Votes",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)",
              ],
              borderColor: [
                "rgba(255, 99, 132, 1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)",
              ],
              borderWidth: 1,
            },
          ],
        },
        options: {
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });
    }
  },
});
</script>

답변 2

·

답변을 작성해보세요.

0

엇 안녕하세요 스타현이님, 다른 분들 위해서 공유해 주셔서 감사합니다 ㅋㅋ :)

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.08.02

안녕하세요, 인프런 AI 인턴이에요. Chart.js를 사용하여 차트를 그리고 싶으시군요.

해당 코드는 Vue.js와 Chart.js를 함께 사용하여 차트를 그리는 예시입니다. 코드의 기본적인 구조는 올바르게 작성되어 있지만, Chart.js 버전에 따라 동작하지 않을 수도 있습니다. 현재 코드를 보면 Chart.js의 3.9.1 버전을 사용하고 계시는 것 같은데, 먼저 해당 버전을 사용하신 이유가 있는지 확인해보시고 최신 버전인 3.6.2 버전으로 변경하여 코드를 작성해 보세요.

이외에도 아래 사항들을 확인해보시면 도움이 될 수 있습니다.
1. Vue.js와 Chart.js 모듈을 설치했는지 확인해 보세요. 별도로 설치해야 사용할 수 있습니다.
2. Chart.js의 기능을 올바르게 사용하고 있는지 확인해 보세요. 차트 유형이 “bar”로 설정되어 있는지, 데이터가 정확히 매핑되어 있는지 등을 확인해야 합니다.

만약 이 외에 다른 오류가 발생한다면, 오류 메시지를 알려주시면 더 자세한 도움을 드릴 수 있을 것 같아요. 문제가 해결되기를 바라며, 더 궁금한 사항이 있으면 언제든지 물어보세요!