woothu
191 lines
4.8 KiB
Vue
191 lines
4.8 KiB
Vue
<template>
|
|
<CChartLine
|
|
:datasets="defaultDatasets"
|
|
:options="defaultOptions"
|
|
:labels="['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import { CChartLine } from '@coreui/coreui-vue-chartjs'
|
|
import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
|
|
|
|
function random (min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1) + min)
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
CChartLine
|
|
},
|
|
computed: {
|
|
defaultDatasets () {
|
|
const brandSuccess = getColor('success') || '#4dbd74'
|
|
const brandInfo = getColor('info') || '#20a8d8'
|
|
const brandDanger = getColor('danger') || '#f86c6b'
|
|
|
|
let elements = 27
|
|
const data1 = []
|
|
const data2 = []
|
|
const data3 = []
|
|
|
|
for (let i = 0; i <= elements; i++) {
|
|
data1.push(random(50, 200))
|
|
data2.push(random(80, 100))
|
|
data3.push(65)
|
|
}
|
|
return [
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: hexToRgba(brandInfo, 10),
|
|
borderColor: brandInfo,
|
|
pointHoverBackgroundColor: '#fff',
|
|
borderWidth: 2,
|
|
data: data1
|
|
},
|
|
{
|
|
label: 'My Second dataset',
|
|
backgroundColor: 'transparent',
|
|
borderColor: brandSuccess,
|
|
pointHoverBackgroundColor: '#fff',
|
|
borderWidth: 2,
|
|
data: data2
|
|
},
|
|
{
|
|
label: 'My Third dataset',
|
|
backgroundColor: 'transparent',
|
|
borderColor: brandDanger,
|
|
pointHoverBackgroundColor: '#fff',
|
|
borderWidth: 1,
|
|
borderDash: [8, 5],
|
|
data: data3
|
|
}
|
|
]
|
|
},
|
|
defaultOptions () {
|
|
return {
|
|
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
drawOnChartArea: false
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
maxTicksLimit: 5,
|
|
stepSize: Math.ceil(250 / 5),
|
|
max: 250
|
|
},
|
|
gridLines: {
|
|
display: true
|
|
}
|
|
}]
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0,
|
|
hitRadius: 10,
|
|
hoverRadius: 4,
|
|
hoverBorderWidth: 3
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// mounted () {
|
|
// const brandSuccess = getStyle('--success') || '#4dbd74'
|
|
// const brandInfo = getStyle('--info') || '#20a8d8'
|
|
// const brandDanger = getStyle('--danger') || '#f86c6b'
|
|
//
|
|
// let elements = 27
|
|
// const data1 = []
|
|
// const data2 = []
|
|
// const data3 = []
|
|
//
|
|
// for (let i = 0; i <= elements; i++) {
|
|
// data1.push(random(50, 200))
|
|
// data2.push(random(80, 100))
|
|
// data3.push(65)
|
|
// }
|
|
// this.renderChart({
|
|
// datasets: [
|
|
// {
|
|
// label: 'My First dataset',
|
|
// backgroundColor: hexToRgba(brandInfo, 10),
|
|
// borderColor: brandInfo,
|
|
// pointHoverBackgroundColor: '#fff',
|
|
// borderWidth: 2,
|
|
// data: data1
|
|
// },
|
|
// {
|
|
// label: 'My Second dataset',
|
|
// backgroundColor: 'transparent',
|
|
// borderColor: brandSuccess,
|
|
// pointHoverBackgroundColor: '#fff',
|
|
// borderWidth: 2,
|
|
// data: data2
|
|
// },
|
|
// {
|
|
// label: 'My Third dataset',
|
|
// backgroundColor: 'transparent',
|
|
// borderColor: brandDanger,
|
|
// pointHoverBackgroundColor: '#fff',
|
|
// borderWidth: 1,
|
|
// borderDash: [8, 5],
|
|
// data: data3
|
|
// }
|
|
// ]
|
|
// }, {
|
|
// tooltips: {
|
|
// enabled: false,
|
|
// custom: CustomTooltips,
|
|
// intersect: true,
|
|
// mode: 'index',
|
|
// position: 'nearest',
|
|
// callbacks: {
|
|
// labelColor: function (tooltipItem, chart) {
|
|
// return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
|
|
// }
|
|
// }
|
|
// },
|
|
// maintainAspectRatio: false,
|
|
// legend: {
|
|
// display: false
|
|
// },
|
|
// scales: {
|
|
// xAxes: [{
|
|
// gridLines: {
|
|
// drawOnChartArea: false
|
|
// }
|
|
// }],
|
|
// yAxes: [{
|
|
// ticks: {
|
|
// beginAtZero: true,
|
|
// maxTicksLimit: 5,
|
|
// stepSize: Math.ceil(250 / 5),
|
|
// max: 250
|
|
// },
|
|
// gridLines: {
|
|
// display: true
|
|
// }
|
|
// }]
|
|
// },
|
|
// elements: {
|
|
// point: {
|
|
// radius: 0,
|
|
// hitRadius: 10,
|
|
// hoverRadius: 4,
|
|
// hoverBorderWidth: 3
|
|
// }
|
|
// }
|
|
// })
|
|
// }
|
|
}
|
|
</script>
|