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=&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0