0f94839d
 함상기
babylon client fo...
|
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<template>
<div class="grid p-fluid">
<div class="col-12 lg:col-6">
<div class="card">
<h5>Linear Chart</h5>
<Chart type="line" :data="lineData"></Chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Pie Chart</h5>
<Chart type="pie" :data="pieData" style="width: 50%"></Chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Polar Area Chart</h5>
<Chart type="polarArea" :data="polarData" style="width: 50%"></Chart>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h5>Bar Chart</h5>
<Chart type="bar" :data="barData"></Chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Doughnut Chart</h5>
<Chart type="doughnut" :data="pieData" style="width: 50%"></Chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Radar Chart</h5>
<Chart type="radar" :data="radarData" style="width: 50%"></Chart>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lineData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: '#03A9F4',
tension: 0.4,
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: '#FFC107',
tension: 0.4,
},
],
},
pieData: {
labels: ['A', 'B', 'C'],
datasets: [
{
data: [540, 325, 702, 421],
backgroundColor: ['rgb(54, 162, 235)', 'rgb(255, 99, 132)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)'],
},
],
},
polarData: {
datasets: [
{
data: [11, 16, 7, 3],
backgroundColor: ['rgb(54, 162, 235)', 'rgb(255, 99, 132)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)'],
label: 'My dataset',
},
],
labels: ['Blue', 'Purple', 'Orange', 'Green'],
},
barData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: '#03A9F4',
borderColor: '#03A9F4',
data: [65, 59, 80, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
backgroundColor: '#FFC107',
borderColor: '#FFC107',
data: [28, 48, 40, 19, 86, 27, 90],
},
],
},
radarData: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100],
},
],
},
};
},
};
</script>
<style scoped></style>
|
