미해결
Vue.js + TypeScript 완벽 가이드
Chart.js(3.9.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>