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

最新推荐文章于 2024-06-20 16:55:28 发布

txcy008

最新推荐文章于 2024-06-20 16:55:28 发布

阅读量4.1k

点赞数 1

分类专栏：学习JavaScript

本文链接：https://blog.csdn.net/txcy008/article/details/78375719

版权

学习JavaScript 专栏收录该内容

9 篇文章 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>