@operato/scene-chartjs 8.0.0-beta.1 → 8.0.0-beta.2
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +2 -2
- package/CHANGELOG.md +0 -1060
- package/demo/bar.html +0 -266
- package/demo/chartjs.html +0 -73
- package/demo/index.html +0 -547
- package/demo/legend.html +0 -267
- package/demo/things-scene-chartjs.html +0 -7
- package/schema.graphql +0 -4458
- package/src/chartjs.ts +0 -139
- package/src/config-converter.ts +0 -404
- package/src/editors/index.ts +0 -8
- package/src/index.ts +0 -4
- package/src/ox-chart.ts +0 -170
- package/src/plugins/chart-series-highlight.ts +0 -41
- package/src/plugins/chartjs-plugin-data-binder.ts +0 -134
- package/src/scene-chart.d.ts +0 -102
- package/src/templates/bar-chart.ts +0 -121
- package/src/templates/doughnut-chart.ts +0 -55
- package/src/templates/horizontal-bar-chart.ts +0 -120
- package/src/templates/index.ts +0 -19
- package/src/templates/line-chart.ts +0 -152
- package/src/templates/mixed-chart.ts +0 -149
- package/src/templates/pie-chart.ts +0 -55
- package/src/templates/polar-area-chart.ts +0 -89
- package/src/templates/radar-chart.ts +0 -95
- package/src/text-formatter.ts +0 -106
- package/test/basic-test.html +0 -61
- package/test/index.html +0 -20
- package/tsconfig.json +0 -24
- package/tsconfig.tsbuildinfo +0 -1
@@ -1,120 +0,0 @@
|
|
1
|
-
const icon = new URL('../../icons/horizontal-bar-chart.png', import.meta.url).href
|
2
|
-
|
3
|
-
export default {
|
4
|
-
type: 'horizontal-bar-chart',
|
5
|
-
description: 'ChartJS - horizontal barchart',
|
6
|
-
icon: icon,
|
7
|
-
group: 'chartAndGauge',
|
8
|
-
/* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
|
9
|
-
model: {
|
10
|
-
type: 'chartjs',
|
11
|
-
top: 200,
|
12
|
-
left: 300,
|
13
|
-
width: 200,
|
14
|
-
height: 200,
|
15
|
-
chart: {
|
16
|
-
type: 'horizontalBar',
|
17
|
-
data: {
|
18
|
-
labels: [],
|
19
|
-
datasets: [
|
20
|
-
{
|
21
|
-
label: 'series 1',
|
22
|
-
data: [],
|
23
|
-
backgroundColor: 'rgb(66, 110, 164)',
|
24
|
-
borderColor: 'rgb(66, 110, 164)',
|
25
|
-
borderWidth: 0,
|
26
|
-
dataKey: 'value1',
|
27
|
-
yAxisID: 'left'
|
28
|
-
},
|
29
|
-
{
|
30
|
-
label: 'series 2',
|
31
|
-
data: [],
|
32
|
-
backgroundColor: 'rgb(62, 196, 221)',
|
33
|
-
borderColor: 'rgb(62, 196, 221)',
|
34
|
-
borderWidth: 0,
|
35
|
-
dataKey: 'value2',
|
36
|
-
yAxisID: 'left'
|
37
|
-
}
|
38
|
-
],
|
39
|
-
labelDataKey: 'color'
|
40
|
-
},
|
41
|
-
options: {
|
42
|
-
theme: 'dark',
|
43
|
-
xGridLine: true,
|
44
|
-
yGridLine: false,
|
45
|
-
legend: {
|
46
|
-
display: true,
|
47
|
-
position: 'top'
|
48
|
-
},
|
49
|
-
scales: {
|
50
|
-
xAxes: [
|
51
|
-
{
|
52
|
-
gridLines: {
|
53
|
-
display: true
|
54
|
-
},
|
55
|
-
scaleLabel: {
|
56
|
-
labelString: '',
|
57
|
-
display: false
|
58
|
-
},
|
59
|
-
ticks: {
|
60
|
-
autoMin: true,
|
61
|
-
autoMax: true,
|
62
|
-
display: true
|
63
|
-
}
|
64
|
-
}
|
65
|
-
],
|
66
|
-
yAxes: [
|
67
|
-
{
|
68
|
-
id: 'left',
|
69
|
-
position: 'left',
|
70
|
-
gridLines: {
|
71
|
-
display: false
|
72
|
-
},
|
73
|
-
scaleLabel: {
|
74
|
-
labelString: '',
|
75
|
-
display: false
|
76
|
-
},
|
77
|
-
ticks: {
|
78
|
-
autoMin: true,
|
79
|
-
autoMax: true,
|
80
|
-
display: true
|
81
|
-
}
|
82
|
-
}
|
83
|
-
]
|
84
|
-
}
|
85
|
-
}
|
86
|
-
},
|
87
|
-
data: [
|
88
|
-
{
|
89
|
-
color: 'Red',
|
90
|
-
value1: 12,
|
91
|
-
value2: 24
|
92
|
-
},
|
93
|
-
{
|
94
|
-
color: 'Blue',
|
95
|
-
value1: 19,
|
96
|
-
value2: 9
|
97
|
-
},
|
98
|
-
{
|
99
|
-
color: 'Yellow',
|
100
|
-
value1: 3,
|
101
|
-
value2: 6
|
102
|
-
},
|
103
|
-
{
|
104
|
-
color: 'Green',
|
105
|
-
value1: 5,
|
106
|
-
value2: 2
|
107
|
-
},
|
108
|
-
{
|
109
|
-
color: 'Purple',
|
110
|
-
value1: 2,
|
111
|
-
value2: 4
|
112
|
-
},
|
113
|
-
{
|
114
|
-
color: 'Orange',
|
115
|
-
value1: 3,
|
116
|
-
value2: 1
|
117
|
-
}
|
118
|
-
]
|
119
|
-
}
|
120
|
-
}
|
package/src/templates/index.ts
DELETED
@@ -1,19 +0,0 @@
|
|
1
|
-
import barChart from './bar-chart'
|
2
|
-
import doughnutChart from './doughnut-chart'
|
3
|
-
import horizontalBarChart from './horizontal-bar-chart'
|
4
|
-
import lineChart from './line-chart'
|
5
|
-
import mixedChart from './mixed-chart'
|
6
|
-
import pieChart from './pie-chart'
|
7
|
-
import polarAreaChart from './polar-area-chart'
|
8
|
-
import radarChart from './radar-chart'
|
9
|
-
|
10
|
-
export default [
|
11
|
-
barChart,
|
12
|
-
horizontalBarChart,
|
13
|
-
lineChart,
|
14
|
-
mixedChart,
|
15
|
-
pieChart,
|
16
|
-
doughnutChart,
|
17
|
-
polarAreaChart,
|
18
|
-
radarChart
|
19
|
-
]
|
@@ -1,152 +0,0 @@
|
|
1
|
-
const icon = new URL('../../icons/line-chart.png', import.meta.url).href
|
2
|
-
|
3
|
-
export default {
|
4
|
-
type: 'line-chart',
|
5
|
-
description: 'ChartJS - line chart',
|
6
|
-
icon: icon,
|
7
|
-
group: 'chartAndGauge',
|
8
|
-
/* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
|
9
|
-
model: {
|
10
|
-
type: 'chartjs',
|
11
|
-
top: 0,
|
12
|
-
left: 0,
|
13
|
-
width: 200,
|
14
|
-
height: 200,
|
15
|
-
chart: {
|
16
|
-
type: 'line',
|
17
|
-
data: {
|
18
|
-
labels: [],
|
19
|
-
datasets: [
|
20
|
-
{
|
21
|
-
label: 'series 1',
|
22
|
-
type: 'line',
|
23
|
-
backgroundColor: 'rgb(66, 110, 164)',
|
24
|
-
borderColor: 'rgb(66, 110, 164)',
|
25
|
-
borderWidth: 3,
|
26
|
-
pointBorderColor: 'rgb(66, 110, 164)',
|
27
|
-
pointBorderWidth: 3,
|
28
|
-
pointBackgroundColor: 'rgba(255,255,255,1)',
|
29
|
-
lineTension: 0.4,
|
30
|
-
yAxisID: 'left',
|
31
|
-
data: [],
|
32
|
-
dataKey: 'value1',
|
33
|
-
fill: false
|
34
|
-
},
|
35
|
-
{
|
36
|
-
label: 'series 2',
|
37
|
-
type: 'line',
|
38
|
-
backgroundColor: 'rgb(62, 196, 221)',
|
39
|
-
borderColor: 'rgb(62, 196, 221)',
|
40
|
-
borderWidth: 3,
|
41
|
-
pointBorderColor: 'rgb(62, 196, 221)',
|
42
|
-
pointBorderWidth: 3,
|
43
|
-
pointBackgroundColor: 'rgba(255,255,255,1)',
|
44
|
-
lineTension: 0.4,
|
45
|
-
yAxisID: 'left',
|
46
|
-
data: [],
|
47
|
-
dataKey: 'value2',
|
48
|
-
fill: false
|
49
|
-
}
|
50
|
-
],
|
51
|
-
labelDataKey: 'data'
|
52
|
-
},
|
53
|
-
options: {
|
54
|
-
theme: 'dark',
|
55
|
-
xGridLine: false,
|
56
|
-
yGridLine: true,
|
57
|
-
legend: {
|
58
|
-
display: true,
|
59
|
-
position: 'top'
|
60
|
-
},
|
61
|
-
scales: {
|
62
|
-
xAxes: [
|
63
|
-
{
|
64
|
-
gridLines: {
|
65
|
-
display: false
|
66
|
-
},
|
67
|
-
scaleLabel: {
|
68
|
-
labelString: '',
|
69
|
-
display: false
|
70
|
-
},
|
71
|
-
ticks: {
|
72
|
-
display: true
|
73
|
-
}
|
74
|
-
}
|
75
|
-
],
|
76
|
-
yAxes: [
|
77
|
-
{
|
78
|
-
id: 'left',
|
79
|
-
position: 'left',
|
80
|
-
gridLines: {
|
81
|
-
display: true
|
82
|
-
},
|
83
|
-
scaleLabel: {
|
84
|
-
labelString: '',
|
85
|
-
display: false
|
86
|
-
},
|
87
|
-
ticks: {
|
88
|
-
autoMin: true,
|
89
|
-
autoMax: true,
|
90
|
-
display: true
|
91
|
-
}
|
92
|
-
},
|
93
|
-
{
|
94
|
-
id: 'right',
|
95
|
-
position: 'right',
|
96
|
-
display: false,
|
97
|
-
gridLines: {
|
98
|
-
display: false
|
99
|
-
},
|
100
|
-
scaleLabel: {
|
101
|
-
labelString: '',
|
102
|
-
display: false
|
103
|
-
},
|
104
|
-
ticks: {
|
105
|
-
autoMin: true,
|
106
|
-
autoMax: true,
|
107
|
-
display: true
|
108
|
-
}
|
109
|
-
}
|
110
|
-
]
|
111
|
-
}
|
112
|
-
}
|
113
|
-
},
|
114
|
-
data: [
|
115
|
-
{
|
116
|
-
data: 'Data 1',
|
117
|
-
value1: 20,
|
118
|
-
value2: 60
|
119
|
-
},
|
120
|
-
{
|
121
|
-
data: 'Data 2',
|
122
|
-
value1: 30,
|
123
|
-
value2: 10
|
124
|
-
},
|
125
|
-
{
|
126
|
-
data: 'Data 3',
|
127
|
-
value1: 80,
|
128
|
-
value2: 40
|
129
|
-
},
|
130
|
-
{
|
131
|
-
data: 'Data 4',
|
132
|
-
value1: 20,
|
133
|
-
value2: 30
|
134
|
-
},
|
135
|
-
{
|
136
|
-
data: 'Data 5',
|
137
|
-
value1: 40,
|
138
|
-
value2: 80
|
139
|
-
},
|
140
|
-
{
|
141
|
-
data: 'Data 6',
|
142
|
-
value1: 10,
|
143
|
-
value2: 30
|
144
|
-
},
|
145
|
-
{
|
146
|
-
data: 'Data 7',
|
147
|
-
value1: 60,
|
148
|
-
value2: 20
|
149
|
-
}
|
150
|
-
]
|
151
|
-
}
|
152
|
-
}
|
@@ -1,149 +0,0 @@
|
|
1
|
-
const icon = new URL('../../icons/mixed-chart.png', import.meta.url).href
|
2
|
-
|
3
|
-
export default {
|
4
|
-
type: 'mixed-chart',
|
5
|
-
description: 'ChartJS - mixed chart',
|
6
|
-
icon: icon,
|
7
|
-
group: 'chartAndGauge',
|
8
|
-
/* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
|
9
|
-
model: {
|
10
|
-
type: 'chartjs',
|
11
|
-
top: 0,
|
12
|
-
left: 0,
|
13
|
-
width: 200,
|
14
|
-
height: 200,
|
15
|
-
chart: {
|
16
|
-
type: 'bar',
|
17
|
-
subType: 'mixed',
|
18
|
-
data: {
|
19
|
-
labels: [],
|
20
|
-
datasets: [
|
21
|
-
{
|
22
|
-
type: 'line',
|
23
|
-
label: 'series 1',
|
24
|
-
backgroundColor: 'rgb(66, 110, 164)',
|
25
|
-
borderColor: 'rgb(66, 110, 164)',
|
26
|
-
borderWidth: 3,
|
27
|
-
pointBorderColor: 'rgb(66, 110, 164)',
|
28
|
-
pointBorderWidth: 3,
|
29
|
-
pointBackgroundColor: 'rgba(255,255,255,1)',
|
30
|
-
lineTension: 0.4,
|
31
|
-
fill: false,
|
32
|
-
yAxisID: 'left',
|
33
|
-
data: [],
|
34
|
-
dataKey: 'value1'
|
35
|
-
},
|
36
|
-
{
|
37
|
-
type: 'bar',
|
38
|
-
label: 'series 2',
|
39
|
-
backgroundColor: 'rgb(62, 196, 221)',
|
40
|
-
borderColor: 'rgb(62, 196, 221)',
|
41
|
-
borderWidth: 0,
|
42
|
-
yAxisID: 'right',
|
43
|
-
data: [],
|
44
|
-
dataKey: 'value2'
|
45
|
-
}
|
46
|
-
],
|
47
|
-
labelDataKey: 'data'
|
48
|
-
},
|
49
|
-
options: {
|
50
|
-
theme: 'dark',
|
51
|
-
multiAxis: true,
|
52
|
-
xGridLine: false,
|
53
|
-
yGridLine: true,
|
54
|
-
legend: {
|
55
|
-
display: true,
|
56
|
-
position: 'top'
|
57
|
-
},
|
58
|
-
scales: {
|
59
|
-
xAxes: [
|
60
|
-
{
|
61
|
-
gridLines: {
|
62
|
-
display: false
|
63
|
-
},
|
64
|
-
scaleLabel: {
|
65
|
-
labelString: '',
|
66
|
-
display: false
|
67
|
-
},
|
68
|
-
ticks: {
|
69
|
-
display: true
|
70
|
-
}
|
71
|
-
}
|
72
|
-
],
|
73
|
-
yAxes: [
|
74
|
-
{
|
75
|
-
position: 'left',
|
76
|
-
id: 'left',
|
77
|
-
gridLines: {
|
78
|
-
display: true
|
79
|
-
},
|
80
|
-
scaleLabel: {
|
81
|
-
labelString: '',
|
82
|
-
display: false
|
83
|
-
},
|
84
|
-
ticks: {
|
85
|
-
autoMin: true,
|
86
|
-
autoMax: true,
|
87
|
-
display: true
|
88
|
-
}
|
89
|
-
},
|
90
|
-
{
|
91
|
-
id: 'right',
|
92
|
-
position: 'right',
|
93
|
-
display: true,
|
94
|
-
gridLines: {
|
95
|
-
display: false
|
96
|
-
},
|
97
|
-
scaleLabel: {
|
98
|
-
labelString: '',
|
99
|
-
display: false
|
100
|
-
},
|
101
|
-
ticks: {
|
102
|
-
autoMin: true,
|
103
|
-
autoMax: true,
|
104
|
-
display: true
|
105
|
-
}
|
106
|
-
}
|
107
|
-
]
|
108
|
-
}
|
109
|
-
}
|
110
|
-
},
|
111
|
-
data: [
|
112
|
-
{
|
113
|
-
data: 'Data 1',
|
114
|
-
value1: 20,
|
115
|
-
value2: 60
|
116
|
-
},
|
117
|
-
{
|
118
|
-
data: 'Data 2',
|
119
|
-
value1: 30,
|
120
|
-
value2: 10
|
121
|
-
},
|
122
|
-
{
|
123
|
-
data: 'Data 3',
|
124
|
-
value1: 80,
|
125
|
-
value2: 40
|
126
|
-
},
|
127
|
-
{
|
128
|
-
data: 'Data 4',
|
129
|
-
value1: 20,
|
130
|
-
value2: 30
|
131
|
-
},
|
132
|
-
{
|
133
|
-
data: 'Data 5',
|
134
|
-
value1: 40,
|
135
|
-
value2: 80
|
136
|
-
},
|
137
|
-
{
|
138
|
-
data: 'Data 6',
|
139
|
-
value1: 10,
|
140
|
-
value2: 30
|
141
|
-
},
|
142
|
-
{
|
143
|
-
data: 'Data 7',
|
144
|
-
value1: 60,
|
145
|
-
value2: 20
|
146
|
-
}
|
147
|
-
]
|
148
|
-
}
|
149
|
-
}
|
@@ -1,55 +0,0 @@
|
|
1
|
-
const icon = new URL('../../icons/pie-chart.png', import.meta.url).href
|
2
|
-
|
3
|
-
export default {
|
4
|
-
type: 'pie-chart',
|
5
|
-
description: 'ChartJS - pie chart',
|
6
|
-
icon: icon,
|
7
|
-
group: 'chartAndGauge',
|
8
|
-
/* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
|
9
|
-
model: {
|
10
|
-
type: 'chartjs',
|
11
|
-
top: 0,
|
12
|
-
left: 0,
|
13
|
-
width: 200,
|
14
|
-
height: 200,
|
15
|
-
chart: {
|
16
|
-
type: 'pie',
|
17
|
-
data: {
|
18
|
-
labels: [],
|
19
|
-
datasets: [
|
20
|
-
{
|
21
|
-
data: [],
|
22
|
-
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
|
23
|
-
borderWidth: 0,
|
24
|
-
dataKey: 'value'
|
25
|
-
}
|
26
|
-
],
|
27
|
-
labelDataKey: 'label'
|
28
|
-
},
|
29
|
-
options: {
|
30
|
-
theme: 'dark',
|
31
|
-
legend: {
|
32
|
-
display: true,
|
33
|
-
position: 'top'
|
34
|
-
},
|
35
|
-
animation: {
|
36
|
-
animateScale: true
|
37
|
-
}
|
38
|
-
}
|
39
|
-
},
|
40
|
-
data: [
|
41
|
-
{
|
42
|
-
label: 'A',
|
43
|
-
value: 80
|
44
|
-
},
|
45
|
-
{
|
46
|
-
label: 'B',
|
47
|
-
value: 15
|
48
|
-
},
|
49
|
-
{
|
50
|
-
label: 'C',
|
51
|
-
value: 15
|
52
|
-
}
|
53
|
-
]
|
54
|
-
}
|
55
|
-
}
|
@@ -1,89 +0,0 @@
|
|
1
|
-
const icon = new URL('../../icons/polar-area-chart.png', import.meta.url).href
|
2
|
-
|
3
|
-
export default {
|
4
|
-
type: 'polar-area-chart',
|
5
|
-
description: 'ChartJS - ploar area chart',
|
6
|
-
icon: icon,
|
7
|
-
group: 'chartAndGauge',
|
8
|
-
/* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
|
9
|
-
model: {
|
10
|
-
type: 'chartjs',
|
11
|
-
top: 0,
|
12
|
-
left: 0,
|
13
|
-
width: 200,
|
14
|
-
height: 200,
|
15
|
-
chart: {
|
16
|
-
type: 'polarArea',
|
17
|
-
data: {
|
18
|
-
labels: [],
|
19
|
-
datasets: [
|
20
|
-
{
|
21
|
-
label: 'My First dataset',
|
22
|
-
backgroundColor: [
|
23
|
-
'rgba(248, 42, 18, 1)',
|
24
|
-
'rgba(255,99,132,1)',
|
25
|
-
'rgba(9, 64, 169, 1)',
|
26
|
-
'rgba(24, 185, 87, 1)',
|
27
|
-
'rgba(216, 100, 19, 1)',
|
28
|
-
'rgba(82, 8, 99, 1)',
|
29
|
-
'rgba(225, 102, 234, 1)'
|
30
|
-
],
|
31
|
-
borderColor: 'rgba(179,181,198,1)',
|
32
|
-
borderWidth: 0,
|
33
|
-
data: [],
|
34
|
-
dataKey: 'rate1'
|
35
|
-
}
|
36
|
-
],
|
37
|
-
labelDataKey: 'hobby'
|
38
|
-
},
|
39
|
-
options: {
|
40
|
-
theme: 'dark',
|
41
|
-
legend: {
|
42
|
-
display: true,
|
43
|
-
position: 'top'
|
44
|
-
},
|
45
|
-
scale: {
|
46
|
-
ticks: {},
|
47
|
-
pointLabels: {}
|
48
|
-
}
|
49
|
-
}
|
50
|
-
},
|
51
|
-
data: [
|
52
|
-
{
|
53
|
-
hobby: 'Eating',
|
54
|
-
rate1: 65,
|
55
|
-
rate2: 28
|
56
|
-
},
|
57
|
-
{
|
58
|
-
hobby: 'Drinking',
|
59
|
-
rate1: 59,
|
60
|
-
rate2: 48
|
61
|
-
},
|
62
|
-
{
|
63
|
-
hobby: 'Sleeping',
|
64
|
-
rate1: 90,
|
65
|
-
rate2: 40
|
66
|
-
},
|
67
|
-
{
|
68
|
-
hobby: 'Designing',
|
69
|
-
rate1: 81,
|
70
|
-
rate2: 19
|
71
|
-
},
|
72
|
-
{
|
73
|
-
hobby: 'Coding',
|
74
|
-
rate1: 56,
|
75
|
-
rate2: 96
|
76
|
-
},
|
77
|
-
{
|
78
|
-
hobby: 'Cycling',
|
79
|
-
rate1: 55,
|
80
|
-
rate2: 27
|
81
|
-
},
|
82
|
-
{
|
83
|
-
hobby: 'Running',
|
84
|
-
rate1: 40,
|
85
|
-
rate2: 100
|
86
|
-
}
|
87
|
-
]
|
88
|
-
}
|
89
|
-
}
|
@@ -1,95 +0,0 @@
|
|
1
|
-
const icon = new URL('../../icons/radar-chart.png', import.meta.url).href
|
2
|
-
|
3
|
-
export default {
|
4
|
-
type: 'radar-chart',
|
5
|
-
description: 'ChartJS - radar chart',
|
6
|
-
icon: icon,
|
7
|
-
group: 'chartAndGauge',
|
8
|
-
/* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
|
9
|
-
model: {
|
10
|
-
type: 'chartjs',
|
11
|
-
top: 0,
|
12
|
-
left: 0,
|
13
|
-
width: 200,
|
14
|
-
height: 200,
|
15
|
-
chart: {
|
16
|
-
type: 'radar',
|
17
|
-
data: {
|
18
|
-
labels: [],
|
19
|
-
datasets: [
|
20
|
-
{
|
21
|
-
label: 'My First dataset',
|
22
|
-
type: 'radar',
|
23
|
-
backgroundColor: 'rgb(66, 110, 164)',
|
24
|
-
borderColor: 'rgb(66, 110, 164)',
|
25
|
-
pointBackgroundColor: 'rgba(255,255,255,1)',
|
26
|
-
pointBorderColor: 'rgb(66, 110, 164)',
|
27
|
-
data: [],
|
28
|
-
fill: false,
|
29
|
-
dataKey: 'rate1'
|
30
|
-
},
|
31
|
-
{
|
32
|
-
label: 'My Second dataset',
|
33
|
-
type: 'radar',
|
34
|
-
backgroundColor: 'rgb(62, 196, 221)',
|
35
|
-
borderColor: 'rgb(62, 196, 221)',
|
36
|
-
pointBackgroundColor: 'rgba(255,255,255,1)',
|
37
|
-
pointBorderColor: 'rgb(62, 196, 221)',
|
38
|
-
data: [],
|
39
|
-
fill: false,
|
40
|
-
dataKey: 'rate2'
|
41
|
-
}
|
42
|
-
],
|
43
|
-
labelDataKey: 'hobby'
|
44
|
-
},
|
45
|
-
options: {
|
46
|
-
theme: 'dark',
|
47
|
-
legend: {
|
48
|
-
display: true,
|
49
|
-
position: 'top'
|
50
|
-
},
|
51
|
-
scale: {
|
52
|
-
ticks: {},
|
53
|
-
pointLabels: {}
|
54
|
-
}
|
55
|
-
}
|
56
|
-
},
|
57
|
-
data: [
|
58
|
-
{
|
59
|
-
hobby: 'Eating',
|
60
|
-
rate1: 65,
|
61
|
-
rate2: 28
|
62
|
-
},
|
63
|
-
{
|
64
|
-
hobby: 'Drinking',
|
65
|
-
rate1: 59,
|
66
|
-
rate2: 48
|
67
|
-
},
|
68
|
-
{
|
69
|
-
hobby: 'Sleeping',
|
70
|
-
rate1: 90,
|
71
|
-
rate2: 40
|
72
|
-
},
|
73
|
-
{
|
74
|
-
hobby: 'Designing',
|
75
|
-
rate1: 81,
|
76
|
-
rate2: 19
|
77
|
-
},
|
78
|
-
{
|
79
|
-
hobby: 'Coding',
|
80
|
-
rate1: 56,
|
81
|
-
rate2: 96
|
82
|
-
},
|
83
|
-
{
|
84
|
-
hobby: 'Cycling',
|
85
|
-
rate1: 55,
|
86
|
-
rate2: 27
|
87
|
-
},
|
88
|
-
{
|
89
|
-
hobby: 'Running',
|
90
|
-
rate1: 40,
|
91
|
-
rate2: 100
|
92
|
-
}
|
93
|
-
]
|
94
|
-
}
|
95
|
-
}
|