การใช้งาน Chart.js ใน Vue 3 จำเป็นต้องติดตั้งและนำเข้าแพ็กเกจ Chart.js และสร้าง Vue component สำหรับการวาดกราฟ. นี่คือขั้นตอนทั่วไป:
ติดตั้ง Chart.js:
ใช้ npm หรือ yarn เพื่อติดตั้งแพ็กเกจ Chart.js:
1
npm install chart.js
หรือ
1
yarn add chart.js
สร้าง Vue Component:
สร้าง Vue component สำหรับการวาดกราฟ ในโปรเจกต์ของคุณ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57<template>
<div>
<canvas ref="myChart"></canvas>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { Chart, registerables } from 'chart.js';
export default {
setup() {
const chartRef = ref(null);
let myChart;
onMounted(() => {
// สร้างกราฟเมื่อ component ถูกเรียก
myChart = new Chart(chartRef.value, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'red',
'blue',
'yellow',
'green',
'purple',
'orange',
],
borderWidth: 1,
},
],
},
options: {
plugins: {
legend: {
display: false, // ซ่อนตารางสี
},
},
},
});
});
return {
chartRef,
};
},
};
</script>
<style scoped>
/* สไตล์สำหรับกราฟ */
</style>เรียกใช้งาน Vue Component:
เรียกใช้งาน Vue component ที่คุณสร้างใน template ของ component หรือหน้า Vue ที่คุณต้องการ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<template>
<div>
<h1>กราฟตัวอย่าง</h1>
<my-chart></my-chart>
</div>
</template>
<script>
import MyChart from './MyChart.vue'; // แทนที่ด้วยเส้นทางของไฟล์ Vue component ของคุณ
export default {
components: {
MyChart,
},
};
</script>ปรับแต่งและการใช้งานเพิ่มเติม:
คุณสามารถปรับแต่งและปรับแปลงกราฟตามความต้องการของคุณโดยใช้ตัวอ้างอิง
myChartที่สร้างเมื่อ component ถูกเรียก. คุณอาจต้องอ่านเอกสารของ Chart.js เพิ่มเติมเพื่อเรียนรู้เกี่ยวกับตัวอ่านการใช้งานและตัวเลือกที่มีให้ในการกำหนดค่ากราฟ.