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

WEB前端 waitig 1519℃ 百度已收录 0评论

效果图
数据是随意填的
这里写图片描述
代码如下

<!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>

本文由【waitig】发表在等英博客
本文固定链接:chartjs 王者荣耀能力雷达图怎么做
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)