86 lines
2.7 KiB
Vue
86 lines
2.7 KiB
Vue
<template>
|
|
<div class="chart-container">
|
|
<canvas :id="chartId"></canvas>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Chart from 'chart.js';
|
|
|
|
export default {
|
|
props: ['chartId', 'labels', 'datasets', 'type'],
|
|
mounted() {
|
|
this.renderChart();
|
|
},
|
|
methods: {
|
|
renderChart() {
|
|
new Chart(document.getElementById(this.chartId), {
|
|
type: this.type || 'bar',
|
|
data: {
|
|
labels: this.labels,
|
|
datasets: this.datasets
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
fontColor: '#495057'
|
|
},
|
|
gridLines: {
|
|
color: '#e9ecef'
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
labels: {
|
|
fontColor: '#007bff'
|
|
}
|
|
},
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
backgroundColor: '#007bff',
|
|
titleFontColor: '#fff',
|
|
bodyFontColor: '#fff',
|
|
footerFontColor: '#fff',
|
|
footerFontSize: 14,
|
|
footerAlign: 'center',
|
|
callbacks: {
|
|
title: function(tooltipItems, data) {
|
|
return 'Date: ' + data.labels[tooltipItems[0].index];
|
|
},
|
|
label: function(tooltipItem, data) {
|
|
return 'Value: ' + tooltipItem.yLabel;
|
|
},
|
|
footer: function(tooltipItems, data) {
|
|
return 'Timestamp: ' + new Date().toLocaleString();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 300px;
|
|
margin: 20px auto;
|
|
}
|
|
</style>
|