Vue Chart.js เป็นแพ็กเกจที่ช่วยให้คุณสร้างกราฟต่าง ๆ ใน Vue.js ด้วย Chart.js เวอร์ชัน 4.0.0 หรือสูงกว่า. นี่คือตัวอย่างการใช้งาน Vue Chart.js 4.0.0:
ติดตั้งแพ็กเกจ Vue Chart.js:
ใช้ npm หรือ yarn เพื่อติดตั้งแพ็กเกจ
vue-chartjs:1
npm install [email protected]
หรือ
1
yarn add [email protected]
สร้าง Vue Component สำหรับกราฟ:
สร้าง Vue component สำหรับกราฟที่คุณต้องการใช้งาน. เช่น สร้าง
BarChart.vue:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<template>
<div>
<bar-chart :data="chartData"></bar-chart>
</div>
</template>
<script>
import { Bar, mixins } from 'vue-chartjs';
export default {
extends: Bar,
mixins: [mixins.reactiveProp],
props: ['chartData'],
mounted() {
this.renderChart(this.chartData, { responsive: true });
},
};
</script>ใช้งาน Vue Component:
ใน 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<template>
<div>
<h1>กราฟแท่ง</h1>
<bar-chart :chartData="data"></bar-chart>
</div>
</template>
<script>
import BarChart from './BarChart.vue'; // ปรับเปลี่ยนเส้นทางของไฟล์ Vue component ของคุณ
export default {
components: {
BarChart,
},
data() {
return {
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
label: 'Sales',
backgroundColor: '#f87979',
data: [50, 20, 30, 15, 40],
},
],
},
};
},
};
</script>ปรับแต่งและปรับรูปแบบกราฟ:
คุณสามารถปรับแต่งและปรับรูปแบบกราฟตามที่คุณต้องการใน Vue component ที่คุณสร้าง โดยใช้ตัวเลือกและสไตล์ที่มีให้ใน Chart.js 4.0.0.
นี่คือขั้นตอนทั่วไปในการใช้งาน Vue Chart.js 4.0.0 เพื่อสร้างกราฟในแอป Vue.js ของคุณ. คุณสามารถดูเอกสารเพิ่มเติมของ Vue Chart.js เพื่อเรียนรู้เกี่ยวกับตัวเลือกและปรับแต่งอื่น ๆ ที่มีให้ในการสร้างกราฟ.