ChartJsRadarChart.vue
1.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script setup>
import { useTheme } from 'vuetify'
import { getRadarChartConfig } from '@core/libs/chartjs/chartjsConfig'
import RadarChart from '@core/libs/chartjs/components/RadarChart'
const vuetifyTheme = useTheme()
const chartConfig = computed(() => getRadarChartConfig(vuetifyTheme.current.value))
const chartData = {
labels: [
'STA',
'STR',
'AGI',
'VIT',
'CHA',
'INT',
],
datasets: [
{
fill: true,
label: 'Donté Panlin',
borderColor: 'transparent',
backgroundColor: 'rgba(255,161,161, 0.9)',
data: [
25,
59,
90,
81,
60,
82,
],
pointBorderColor: 'transparent',
pointBackgroundColor: 'transparent',
},
{
fill: true,
label: 'Mireska Sunbreeze',
borderColor: 'transparent',
backgroundColor: 'rgba(155,136,250, 0.9)',
data: [
40,
100,
40,
90,
40,
90,
],
pointBorderColor: 'transparent',
pointBackgroundColor: 'transparent',
},
],
}
</script>
<template>
<RadarChart
:height="400"
:chart-data="chartData"
:chart-options="chartConfig"
/>
</template>