amcharts实现多种雷达图效果-html代码-BFW代码库

amcharts实现多种雷达图效果

代码语言：html

所属分类：图表

代码描述：amcharts实现多种雷达图效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        body {
            background-color: #fff;
            color: #333;
        }

        [id*=chart] {
            width: 100%;
            height: 300px;
        }

        h2 {
            margin-top: 0;
        }

        .amcharts-chart-div {
            border: 2px solid #ccc;
            background: #fff;
            border-radius: 1em;
        }
        .amcharts-chart-div a {
            display: none !important;
        }

        .amcharts-export-menu {
            display: none;
        }

        .well {
            border-radius: 0;
            margin-bottom: -1px;
        }

@media screen and (max-width: 768px) {
            .well {
                margin: 1em;
            }
        }
    </style>

</head>
<body translate="no">
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script>

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-dark.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-radar.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-export.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/amcharts-export.css">
    <div class="container">
        <h1>My Skill Levels <small><a href="" title="JavaScript charts">Using amCharts</a></small></h1>
        <div class="row">
            <div class="well col-sm-6">
                <h2>Team</h2>
                <div id="chart-general"></div>
            </div>
            <div class="well col-sm-6">
                <h2>Design</h2>
                <div id="chart-design"></div>
            </div>
        </div>
        <div class="row">
            <div class="well col-sm-6">
                <h2>UI Technical</h2>
                <div id="chart-ui-tech"></div>
            </div>
            <div class="well col-sm-6">
                <h2>Other Technical</h2>
                <div id="chart-ui-apptech"></div>
            </div>
        </div>
    </div>

    <script>
        var chart = AmCharts.makeChart("chart-general", {
            "type": "radar",
            "theme": "light",
            "dataProvider": [{
                "direction": "Product",
                "value": 9,
                "value2": 0
            },
                {
                    "direction": "Design",
                    "value": 8,
                    "value2": 0
                },
                {
                    "direction": "Engineering",
                    "value": 8,
                    "value2": 0
                }],

            "valueAxes": [{
                "gridType": "circles",
                "labelsEnabled": false,
                "minimum": 0,
                "autoGridCount": false,
                "fontSize": 16,
                "axisColor": "#4dadf7",
                "axisAlpha": 0.8,
                "fillAlpha": 0,
                "fillColor": "#333333",
                "gridAlpha": 0,
                "position": "left"
            }],

            "startDuration": 1,
            "graphs": [{
                "balloonText": "[[category]] Skill Level: [[value]] (of 10)",
                "bullet": "none",
                "lineColor": "#4dadf7",
                "fillColors": "#4dadf7",
                "fillAlphas": 0.75,
                "valueField": "value"
            },

                {
                    "balloonText": "[[category]] Skill Level: [[value]] (of 10)",
                    "bullet": "none",
                    "fillAlphas": 0.5,
                    "valueField": "value2"
                }],

            "categoryField": "direction",
            "export": {
                "enabled": true
            }
        });




        var chart = AmCharts.makeChart("chart-design", {
            "type": "radar",
            "theme": "light",
            "dataProvider": [{
                "direction": "User Experience",
                "value": 9,
                "value2": 0
            },
                {
                    "direction": "UI Copy",
                    "value": 7,
                    "value2": 0
                },
                {
                    "direction": "User Interface",
                    "value": 8.5,
                    "value2": 0
                },
                {
                    "direction": "Accessibility",
                    "value": 8,
                    "value2": 0
                },
                {
                    "direction": "Prototyping",
                    "value": 9,
                    "value2": 0
                },
                {
                    "direction": "Info Architecture",
                    "value": 8,
                    "value2": 0
                }],

            "valueAxes": [{
                "gridType": "polygons",
                "minimum": 0,
                "labelsEnabled": false,
                "autoGridCount": false,
                "axisAlpha": 0.2,
                "fillAlpha": 0.1,
                "fillColor": "#000000",
                &qu.........完整代码请登录后点击上方下载按钮下载查看