chartjs 王者荣耀能力雷达图怎么做

效果图
数据是随意填的
chartjs 王者荣耀能力雷达图怎么做_第1张图片
代码如下


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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>

你可能感兴趣的:(学习JavaScript)