效果圖
數據是隨意填的
代碼如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#chart-wrapper {
position: relative;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart-wrapper">
<canvas id="canvas"></canvas>
</div>
<script src="https://cdn.bootcss.com/Chart.js/2.4.0/Chart.min.js"></script>
<script>
//Get the context of the canvas element we want to select
var ctx = document.getElementById('canvas').getContext('2d');
var canvas = document.getElementById("canvas");
var myRadarChart = new Chart(ctx, {
"type": "radar",
"data": {
"labels": [
"綜合",
"KDA",
"生存",
"團戰",
"發育",
"輸出"
],
"datasets": [{
"label": "蓋亞",
"data": [65, 59, 90, 81, 56, 55],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)",
"fill": true
}, {
"label": "李白",
"data": [28, 48, 40, 19, 96, 27],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)",
"fill": true
}]
},
options: {
scale: {
ticks: {
//最小刻度 最大刻度 刻度的步長(長度)
suggestedMin: 0,
suggestedMax: 100,
stepSize: 10
}
}
}
});
</script>
</body>
</html>