前言
在我之前與他人合作的畢業專案，我的好組員利用了vue-chart.js做了很讓人驚豔的圖表，著實讓我們的專案增添了不少色彩。今天就來體驗一下這幾個好用的套件做些簡單的圖表吧!
使用技術
使用方法
安裝與資料格式設定
npm install vue-chartjs chart.js --save
要構成一個圖表基本上分為兩個部分，首先是資料內容-chartdata，裡面包含著labels & datasets兩個物件。
labels陣列中傳入水平座標軸你所希望顯示的值。
datasets中則傳入每個labels所對應的數值，如下面的例子。
lineChartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Weight track',
backgroundColor: "transparent",
data: [75, 75.6, 77.8, 78.1, 79.1, 80, 78.5],
borderColor: "rgba(1, 116, 188, 0.50)",
pointBackgroundColor: "rgba(171, 71, 188, 1)"
}
]
},
上方的設定會產出這樣的圖表。
另一個部分則是要傳入的options，在這裡你可以找到所有可用的options
options: {
responsive: true,
maintainAspectRatio: false
}
資料綁定
資料綁定的方法有相當多種，這邊我列出兩個比較常見的做法。
在子層直接export(注意不需要有template tag)
子層 src/components/BarChart.vue
<script>
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
mounted() {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
})
}
}
</script>
父層 src/App.vue
<div class="col-md-5 mr-2">
<div class="card h-100">
<BarChart />
</div>
</div>
在父層利用props傳遞資料
子層 src/components/LineChart.vue
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: ['chartdata', 'options'],
mounted() {
this.renderChart(this.chartdata, this.options)
}
}
</script>
父層 src/App.vue
<LineChart :chartdata="lineChartData" :options="options" />
data() {
return {
lineChartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Weight track',
backgroundColor: "transparent",
data: [75, 75.6, 77.8, 78.1, 79.1, 80, 78.5],
borderColor: "rgba(1, 116, 188, 0.50)",
pointBackgroundColor: "rgba(171, 71, 188, 1)"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false
}}
以上兩種方法都可以將資料傳遞進不同的chart components，不過示範的都是local data，官方文件上也有寫到如何利用API取資料後存入，有興趣的可以繼續查看!
實際上做起來沒有想像的困難，不過後續的優化會挺花時間的，今天畢竟只是體驗一下:D
專案預覽
專案連結
github:https://github.com/windate3411/vue-chart
github page:https://windate3411.github.io/vue-chart/
Danny的學習紀錄 