| Server IP : / Your IP : 10.244.4.16 [ Web Server : nginx/1.25.3 System : Linux escuela-portal-app-54f56585bc-kst6g 5.15.0-1084-azure #93-Ubuntu SMP Sat Mar 15 14:12:29 UTC 2025 x86_64 User : root ( 0) PHP Version : 8.2.13 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals, Domains : 0 Domains MySQL : OFF | cURL : ON | WGET : OFF | Perl : ON | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /proc/448/cwd/app/resources/js/components/admin/widgets/ |
Upload File : |
<template>
<div>
<div class="card" :class="className">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-chart-pie mr-1"></i>
{{title}}
</h3>
</div>
<div class="card-body">
<div class="chart" id="revenue-chart" style="position: relative;" v-bind:style="{'height': height + 'px'}">
<canvas v-bind:id="id" v-bind:height="height" v-bind:style="{'height': height + 'px'}"></canvas>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: 'Gráfico'
},
id: String,
type: String,
className: String,
labels: Array,
datasets: Array,
height: {
type: Number,
default: 500
}
},
mounted() {
var salesChartCanvas = document.getElementById(this.id).getContext("2d");
var salesChartData = {
labels: this.labels,
datasets: this.datasets,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
};
var salesChartOptions = {
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
},
scales: {
xAxes: [
{
gridLines: {
display: false,
},
},
],
yAxes: [
{
gridLines: {
display: false,
},
},
],
},
};
new Chart(salesChartCanvas, {
type: this.type || 'line',
data: salesChartData,
options: salesChartOptions,
});
},
};
</script>