112 lines
2.4 KiB
HTML
112 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Basic Radar</title>
|
|
|
|
|
|
<link href="../../assets/styles.css" rel="stylesheet" />
|
|
|
|
<style>
|
|
#chart, #app {
|
|
max-width: 450px;
|
|
margin: 35px auto;
|
|
}
|
|
button {
|
|
position: relative;
|
|
top: -70px;
|
|
left: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="app">
|
|
<div id="chart">
|
|
|
|
</div>
|
|
|
|
<button onclick="update()">update</button>
|
|
</div>
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
|
|
|
|
<script>
|
|
var options = {
|
|
chart: {
|
|
height: 350,
|
|
type: 'radar',
|
|
dropShadow: {
|
|
enabled: true,
|
|
blur: 1,
|
|
left: 1,
|
|
top: 1
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Series 1',
|
|
data: [80, 50, 30, 40, 100, 20],
|
|
}, {
|
|
name: 'Series 2',
|
|
data: [20, 30, 40, 80, 20, 80],
|
|
}, {
|
|
name: 'Series 3',
|
|
data: [44, 76, 78, 13, 43, 10],
|
|
}],
|
|
title: {
|
|
text: 'Radar Chart - Multi Series'
|
|
},
|
|
stroke: {
|
|
width: 0
|
|
},
|
|
fill: {
|
|
opacity: 0.4
|
|
},
|
|
markers: {
|
|
size: 0
|
|
},
|
|
labels: ['2011', '2012', '2013', '2014', '2015', '2016']
|
|
}
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#chart"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
|
|
function update() {
|
|
|
|
function randomSeries() {
|
|
var arr = []
|
|
for(var i = 0; i < 6; i++) {
|
|
arr.push(Math.floor(Math.random() * 100))
|
|
}
|
|
|
|
return arr
|
|
}
|
|
|
|
|
|
chart.updateSeries([{
|
|
name: 'Series 1',
|
|
data: randomSeries(),
|
|
}, {
|
|
name: 'Series 2',
|
|
data: randomSeries(),
|
|
}, {
|
|
name: 'Series 3',
|
|
data: randomSeries(),
|
|
}])
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |