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

来源：互联网发布：尸油知乎编辑：程序博客网时间：2024/04/29 04:05
效果图
数据是随意填的
这里写图片描述
代码如下
<!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>
阅读全文
0 0