将amchart.js雷达图插入bootstrap cols时不可见

时间：2018-07-02 18:42:15

标签： javascript bootstrap-4 amcharts radar-chart

我试图将几种类型的amchart.js图表​​放在引导列中。可以毫无问题地呈现“ amStockGraph”类型的图表，但是当我尝试呈现不显示的雷达图时，它们只是空白，并且控制台中没有错误。.任何建议将不胜感激。这是代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>AmStockGraph Sample</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/amcharts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/serial.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/amstock.js"></script>

        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

        <!-- Anime.JS-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
        <!-- Resources Amchart-->
<script src="https://www.amcharts.com/lib/3/radar.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

        <style>
            a[href="http://www.amcharts.com/javascript-charts/"]{
                display: none!important;
            }
            html,body{
                margin:0;
                padding:0;
            }

@import url(http://fonts.googleapis.com/css?family=Lato:300);

body {
    background-color:azure;
    margin-left: 32px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    font-family: "Lato", Arial;
    font-size: 14px;
    line-height:16px;
}

hr{
   border: 1px groove steelblue;
    width: 100%;
    opacity: .3     
}

a:link{
    color:#0055CC;
}
a:visited{
        color:#990099;
}
a:hover{
        color:#CC0000;
}

th{
    background-color:#FFFFFF;
    font-weight:bold;
}

td{
    background-color:#ecf7fe;
    text-align:center;
}

            .flexCent{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 40px;
                padding-top: 0!important
            }

            .flexJust{
                display: flex;
                justify-content: center;
                padding: 40px;
                padding-top: 0!important
            }

            .mainRow{
                width:100%;
                height:400px;
                margin-top: 15px;
            }

            .btn{
                width: 180px;
                height: 45px!important;
                margin-bottom: 7px;
                margin-top: 7px;
                position: relative;
                left: -350px;
            }

            .txtAlignleft{
                text-align: left;
                margin-top: 12px;

            }

            .txtAlignCent{
                text-align: center;
                margin: auto;
            }

            .btns2{
                background-color: #00A3A1;
                position: relative;
                left: -350px;
            }

            .active {
            display: block;  
            }

            .inactive {
                display: none;
            }

            .selects{
                margin-top: 35px;
            }

            select{
                margin-left: 3px;
                margin-right: 30px;
            }

        </style>
        <script type="text/javascript">

      var chartData = [
          {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#C6007E"},
          {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#C6007E"},
          {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#C6007E"},
          {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#C6007E"},
          {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#C6007E"},
          {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#C6007E"},
          {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#C6007E"},
          {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#C6007E"},
          {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#C6007E"},
          {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#C6007E"},
          {date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#C6007E"},
          {date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#C6007E"},
          {date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#C6007E"},
          {date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#C6007E"},
          {date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#C6007E"},
          {date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#C6007E"},
          {date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#C6007E"},
          {date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#C6007E"},
          {date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#C6007E"},
          {date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#C6007E"},
          {date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#C6007E"},
          {date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#C6007E"},
          {date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#C6007E"},
          {date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#C6007E"},
          {date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#C6007E"},
          {date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#C6007E"},
          {date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#C6007E"},
          {date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#C6007E"},
          {date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#C6007E"},
          {date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#C6007E"}
      ];

       var chartData2 = [
          {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#00bfff"},
          {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#00bfff"},
          {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#00bfff"},
          {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#00bfff"},
          {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#00bfff"},
          {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#00bfff"},
          {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#00bfff"},
          {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#00bfff"},
          {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#00bfff"},
          {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#00bfff"},
          {date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#00bfff"},
          {date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#00bfff"},
          {date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#00bfff"},
          {date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#00bfff"},
          {date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#00bfff"},
          {date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#00bfff"},
          {date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#00bfff"},
          {date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#00bfff"},
          {date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#00bfff"},
          {date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#00bfff"},
          {date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#00bfff"},
          {date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#00bfff"},
          {date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#00bfff"},
          {date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#00bfff"},
          {date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#00bfff"},
          {date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#00bfff"},
          {date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#00bfff"},
          {date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#00bfff"},
          {date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#00bfff"},
          {date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#00bfff"}
      ];

      var chartData3 = [
          {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#ffff00"},
          {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#ffff00"},
          {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#ffff00"},
          {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#ffff00"},
          {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#ffff00"},
          {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#ffff00"},
          {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#ffff00"},
          {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#ffff00"},
          {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#ffff00"},
          {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#ffff00"},
          {date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#ffff00"},
          {date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#ffff00"},
          {date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#ffff00"},
          {date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#ffff00"},
          {date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#ffff00"},
          {date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#ffff00"},
          {date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#ffff00"},
          {date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#ffff00"},
          {date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#ffff00"},
          {date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#ffff00"},
          {date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#ffff00"},
          {date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#ffff00"},
          {date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#ffff00"},
          {date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#ffff00"},
          {date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#ffff00"},
          {date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#ffff00"},
          {date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#ffff00"},
          {date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#ffff00"},
          {date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#ffff00"},
          {date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#ffff00"}
      ];


      var chartData4 = [
          {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#00ff80"},
          {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#00ff80"},
          {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#00ff80"},
          {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#00ff80"},
          {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#00ff80"},
          {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#00ff80"},
          {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#00ff80"},
          {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#00ff80"},
          {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#00ff80"},
          {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#00ff80"},
          {date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#00ff80"},
          {date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#00ff80"},
          {date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#00ff80"},
          {date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#00ff80"},
          {date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#00ff80"},
          {date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#00ff80"},
          {date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#00ff80"},
          {date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#00ff80"},
          {date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#00ff80"},
          {date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#00ff80"},
          {date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#00ff80"},
          {date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#00ff80"},
          {date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#00ff80"},
          {date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#00ff80"},
          {date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#00ff80"},
          {date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#00ff80"},
          {date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#00ff80"},
          {date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#00ff80"},
          {date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#00ff80"},
          {date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#00ff80"}
      ];

      var chartData5 = [
          {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#0040ff"},
          {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#0040ff"},
          {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#0040ff"},
          {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#0040ff"},
          {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#0040ff"},
          {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#0040ff"},
          {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#0040ff"},
          {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#0040ff"},
          {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#0040ff"},
          {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#0040ff"},
          {date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#0040ff"},
          {date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#0040ff"},
          {date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#0040ff"},
          {date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#0040ff"},
          {date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#0040ff"},
          {date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#0040ff"},
          {date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#0040ff"},
          {date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#0040ff"},
          {date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#0040ff"},
          {date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#0040ff"},
          {date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#0040ff"},
          {date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#0040ff"},
          {date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#0040ff"},
          {date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#0040ff"},
          {date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#0040ff"},
          {date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#0040ff"},
          {date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#0040ff"},
          {date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#0040ff"},
          {date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#0040ff"},
          {date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#0040ff"}
      ];

      var chartData6 = [
          {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#ff0040"},
          {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#ff0040"},
          {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#ff0040"},
          {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#ff0040"},
          {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#ff0040"},
          {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#ff0040"},
          {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#ff0040"},
          {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#ff0040"},
          {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#ff0040"},
          {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#ff0040"},
          {date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#ff0040"},
          {date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#ff0040"},
          {date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#ff0040"},
          {date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#ff0040"},
          {date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#ff0040"},
          {date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#ff0040"},
          {date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#ff0040"},
          {date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#ff0040"},
          {date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#ff0040"},
          {date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#ff0040"},
          {date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#ff0040"},
          {date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#ff0040"},
          {date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#ff0040"},
          {date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#ff0040"},
          {date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#ff0040"},
          {date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#ff0040"},
          {date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#ff0040"},
          {date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#ff0040"},
          {date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#ff0040"},
          {date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#ff0040"}
      ];

      radarData =  [ {
                "country": "India",
                "mmUSD": 156.9
              }, {
                "country": "Chile",
                "mmUSD": 131.1
              }, {
                "country": "US",
                "mmUSD": 115.8
              }, {
                "country": "UK",
                "mmUSD": 109.9
              }, {
                "country": "China",
                "mmUSD": 108.3
              }, {
                "country": "Romania",
                "mmUSD": 99
              } ];


            function drawChart(dataChart) {
                    var chart = new AmCharts.AmStockChart();
          chart.pathToImages = "./amcharts";

          var dataSet = new AmCharts.DataSet();
          dataSet.dataProvider = dataChart;
          dataSet.fieldMappings = [{fromField:"val", toField:"value"}];
          dataSet.categoryField = "date";
          chart.dataSets = [dataSet];

          var stockPanel = new AmCharts.StockPanel();
          chart.panels = [stockPanel];

          var panelsSettings = new AmCharts.PanelsSettings();
          panelsSettings.startDuration = 1;
          chart.panelsSettings = panelsSettings;

          var graph = new AmCharts.StockGraph();
          graph.valueField = "value";
          graph.type = "column";
          graph.fillAlphas = 1;
                    graph.showHandOnHover = true;
          graph.title = "First Graph";
                    graph.cornerRadiusTop = 6;
          stockPanel.addStockGraph(graph);
                    graph.colorField = "color";
                    graph.lineAlpha = 0;

          chart.write("chartdiv");

            }


            AmCharts.ready(function() {
                drawChart(chartData);
        });

        function changeChart() {
            if($("#country").val() == 1 && $("#city").val()== 1) {
                drawChart(chartData);   
            }
            if($("#country").val() == 1 && $("#city").val()== 2) {
                drawChart(chartData2);  
            }
            if($("#country").val() == 2 && $("#city").val()== 1) {
                drawChart(chartData3);  
            }
            if($("#country").val() == 2 && $("#city").val()== 2) {
                drawChart(chartData4);  
            }
            if($("#country").val() == 3 && $("#city").val()== 1) {
                drawChart(chartData5);  
            }
            if($("#country").val() == 3 && $("#city").val()== 2) {
                drawChart(chartData6);  
            }
        }

        function drawRadar(dataRadar) {

            var chart = AmCharts.makeChart( "chartdiv", {
                  "type": "radar",
                  "theme": "light",
                  "dataProvider": dataRadar,
                  "valueAxes": [ {
                "axisTitleOffset": 20,
                "minimum": 0,
                "axisAlpha": 0.15
              } ],
                  "startDuration": 2,
                  "graphs": [ {
                    "balloonText": "[[value]] mmUSD of beer per year",
                    "bullet": "round",
                    "lineThickness": 2,
                    "valueField": "mmUSD"
                  } ],

                  "categoryField": "country",
                  "export": {
                    "enabled": false
                  }
                } );

        }

        function changeToRadar() {
            drawRadar(radarData);
        }


        </script>
    </head>
    <body>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12" style="background-color: white;">
                    <img src="./amcharts/logos.svg" alt="">
                </div>
                <hr>

            </div>
            <div class="row mainRow" id="penner">
                <div class="col-xs-12 col-md-3 txtAlignCent line">
                    <button class="btn btn-primary linear btnScale">controller 1</button>
                    <button class="btn btn-primary InQuad btnScale" onclick="changeToRadar()">controller 2</button>
                    <button class="btn btn-primary InCubic btnScale">controller 3</button>
                </div>

                <div class="col-xs-12 col-md-6">
                    <div id="chartdiv" class="mainRow "></div>
                    <!--<div id="chartdiv2" class="mainRow "></div> 
                    <div id="chartdiv3" class="mainRow "></div> 
                    <div id="chartdiv4" class="mainRow "></div> 
                    <div id="chartdiv5" class="mainRow "></div> 
                    <div id="chartdiv6" class="mainRow "></div> --> 
                </div>

                <div class="col-xs-12 col-md-3 txtAlignleft" >
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum consectetur cupiditate, fugiat dolore voluptatibus eaque, consequatur, excepturi, vero dolorum reiciendis aliquid similique accusantium voluptate culpa repudiandae qui. Tenetur, praesentium ratione.</p>
                </div>
            </div>

            <div class="row selects">
                <div class="col-sm-3">

                </div>
                <div class="col-sm-6 d-flex justify-content-center">
                    <select id="country" class="mdb-select" onchange= "changeChart()" >                     
                        <option value="1" selected>Country 1</option>
                        <option value="2">Country 2</option>
                        <option value="3">Country 3</option>
                    </select>


                    <select  id="city" class="mdb-select" onchange= "changeChart()">                        
                        <option value="1" selected >City 1</option>
                        <option value="2">City 2</option>                       
                    </select>
                </div>
                <div class="col-sm-3">

                </div>
            </div>
        </div>

    <script>
        var penner = anime.timeline();
        penner
          .add({
            targets: '#penner  .linear', translateX: 350, offset: 0,
           duration: 3000,
            elasticity: 100,
          })
          .add({
            targets: '#penner .InQuad', translateX: 350, offset: 0,
           duration: 3000,
            elasticity: 200,
          })
          .add({
            targets: '#penner .InCubic', translateX: 350, offset: 0,
           duration: 3000,
            elasticity: 300,
          })
          .add({
            targets: '#penner2 .InQuart', translateX: 350, offset: 0,
           duration: 3000,
            elasticity: 400,
          })
          .add({
            targets: '#penner2 .InQuint', translateX: 350, offset: 0,
          duration: 3000,
            elasticity: 500,
          })
          .add({
            targets: '#penner2 .InSine', translateX: 350, offset: 0,
          duration: 3000,
            elasticity: 600,
          })


        </script>
        <!-- jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>  

    </body>
</html>

1 个答案:

答案 0 :(得分：1)

它没有出现，因为您在代码中混合了AmCharts版本。您正在从cloudflare（3.13.0）加载旧版本的amcharts和股票图表，并且无法使用amcharts.com域上最新版本的radar.js。将您的cloudflare包括切换到amcharts.com即可解决此问题：

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/radar.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
相关问题
最新问题