一、條紋：美化柱狀圖的絕佳方式
在Vue柱狀圖的設計中，條紋（stripes）是一種美化效果的絕佳方式。可以通過設置CSS樣式，在柱狀圖上添加豎條紋或水平條紋。豎條紋（vertical）可以通過background-image和linear-gradient實現，水平條紋（horizontal）可以通過background-image和repeating-linear-gradient實現。
<template>
<div class="chart-container">
<canvas id="bar-chart"></canvas>
</div>
</template>
<style>
.chart-container {
position: relative;
margin-top: 30px;
height: 300px;
width: 100%;
background: #F7F7F7;
border-radius: 5px;
}
#bar-chart {
background-size: 30px 100%;
background-repeat: repeat-x;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 0%);
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
}
</style>
二、怎麼寫：從數據到真正實現柱狀圖
Vue柱狀圖的實現需要先準備好數據，在數據中為每一個條形提供一個值。之後，需要定義一些變量和參數來配置柱狀圖的樣式，在mounted()生命周期方法中創建新的Chart對象並傳遞數據和選項。數據配置完成後，需要按照canvas元素的高度和寬度計算每個柱形的寬度。
<template>
<div class="chart-container">
<canvas id="bar-chart"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
data () {
return {
datacollection: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Data One',
backgroundColor: ['#F26202', '#F7981C', '#FFE32C', '#60B8E8', '#02A4D3', '#0D3C55', '#021E34', '#19D3DA'],
data: [40, 20, 12, 39, 10, 20, 30, 29],
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
},
files: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
labels: ['Data One']
}
},
mounted () {
this.renderChart()
},
methods: {
renderChart () {
const ctx = document.getElementById('bar-chart').getContext('2d')
let gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(1, 'rgba(29,140,248,0.2)');
gradientStroke.addColorStop(0.4, 'rgba(29,140,248,0.0)');
gradientStroke.addColorStop(0, 'rgba(29,140,248,0)');
let myChart = new Chart(ctx, {
type: 'bar',
data: this.datacollection,
options: this.options
})
let dataset = myChart.data.datasets[0];
let bars = [];
let width = (myChart.chart.width * 0.9) / dataset.data.length;
for (let i = 0; i < dataset.data.length; i++) {
let x = myChart.chart.width * 0.05 + width * i;
let y = myChart.chart.height - (myChart.chart.height * dataset.data[i] / 100);
bars.push(new this.Bar(x, y, width, myChart.chart.height * dataset.data[i] / 100, dataset.backgroundColor[i]));
}
this.draw(bars, ctx);
},
Bar (x, y, w, h, c) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.c = c;
},
draw (bars, ctx) {
ctx.save();
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
bars.forEach(function (bar) {
ctx.fillStyle = bar.c;
ctx.fillRect(bar.x, bar.y, bar.w, bar.h);
});
ctx.restore();
}
}
}
</script>
三、組件：在Vue項目中引入柱狀圖組件
為了提高可重用性並且使柱狀圖更加易用，可以將其封裝成Vue組件。在組件中，可以傳入data屬性作為柱狀圖的數據源，以及其他一些自定義選項來自定義柱狀圖。另外，也可以定義一些生命周期方法來完善組件的功能。
<template>
<div>
<canvas ref="chart"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
props: {
data: {
type: Object,
default: null
},
options: {
type: Object,
default: null
},
type: {
type: String,
default: 'bar'
},
height: {
type: Number,
default: 400
},
width: {
type: Number,
default: 600
}
},
mounted () {
this.renderChart()
},
methods: {
renderChart () {
let ctx = this.$refs.chart.getContext('2d')
this.chart = new Chart(ctx, {
type: this.type,
data: this.data,
options: this.options
})
},
updateChart () {
this.chart.data = this.data
this.chart.update()
}
},
watch: {
data () {
this.updateChart()
}
}
}
</script>
四、點擊顯示明細選取：實現交互性Vue柱狀圖
在Vue柱狀圖的實際應用中，為了增加交互性和可操作性，很多時候需要點擊某個柱狀圖來顯示更多詳細信息。這個功能可以通過Vue的事件監聽器來實現。在監聽到click事件後，調用自定義方法來顯示具體的信息，例如本例中的showDetails()方法。
<template>
<div class="chart-container">
<canvas id="bar-chart" @click="showDetails"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
data () {
return {
datacollection: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Data One',
backgroundColor: ['#F26202', '#F7981C', '#FFE32C', '#60B8E8', '#02A4D3', '#0D3C55', '#021E34', '#19D3DA'],
data: [40, 20, 12, 39, 10, 20, 30, 29],
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
},
files: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
labels: ['Data One']
}
},
mounted () {
this.renderChart()
},
methods: {
renderChart () {
const ctx = document.getElementById('bar-chart').getContext('2d')
let gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(1, 'rgba(29,140,248,0.2)');
gradientStroke.addColorStop(0.4, 'rgba(29,140,248,0.0)');
gradientStroke.addColorStop(0, 'rgba(29,140,248,0)');
let myChart = new Chart(ctx, {
type: 'bar',
data: this.datacollection,
options: this.options
})
let dataset = myChart.data.datasets[0];
let bars = [];
let width = (myChart.chart.width * 0.9) / dataset.data.length;
for (let i = 0; i < dataset.data.length; i++) {
let x = myChart.chart.width * 0.05 + width * i;
let y = myChart.chart.height - (myChart.chart.height * dataset.data[i] / 100);
bars.push(new this.Bar(x, y, width, myChart.chart.height * dataset.data[i] / 100, dataset.backgroundColor[i]));
}
this.draw(bars, ctx);
},
Bar (x, y, w, h, c) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.c = c;
},
draw (bars, ctx) {
ctx.save();
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
bars.forEach(function (bar) {
ctx.fillStyle = bar.c;
ctx.fillRect(bar.x, bar.y, bar.w, bar.h);
});
ctx.restore();
},
showDetails () {
// 這裡可以實現點擊某個柱狀圖，展示更多詳情
alert('Show details')
}
}
}
</script>
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/150778.html
微信掃一掃 
支付寶掃一掃 