Question

我想在单个页面中显示两个guage amcharts但我修改了代码，然后两个图表成功显示到一个页面，但不幸的是只有一个图表只给动画效果，但第二个图表不起作用...请帮我怎么样这样做..我的代码如下：

    <!-- Styles -->
            <style>
            #chartdiv1 {
              width: 100%;
              height:200px;
              margin: 0 auto;
              background: transparent url(dwn_cent_03.png) no-repeat center 50%;
            }

            #chartdiv2 {
              width: 100%;
              height:200px;
              margin: 0 auto;
              background: transparent url(upload_center_05.png) no-repeat center 50%;
            }

            </style>

            <!-- Resources -->
            <script src="../amcharts.js"></script>
            <script src="https://www.amcharts.com/lib/3/gauge.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>

            <!-- Chart code -->
            <script>

            var chart1 = AmCharts.makeChart("chartdiv1", {
              "theme": "light",
              "type": "gauge",
              "axes": [{
                "topTextFontSize": 17,
                "topTextYOffset": 108,
                "topTextColor":"#9797a6",
                "color": "#9797a6",
                "axisColor": "#9797a6",
                "axisThickness": 2,
                "endValue": 100,
                "gridInside": true,
                "inside": true,
                "radius": "90%",
                "valueInterval": 20,
                "tickColor": "#9797a6",
                "startAngle": -140,
                "endAngle": 140,
                "unit": "M",
                "bandOutlineAlpha": 0,
                "bands": [{
                  "color": "#d9d9e3",
                  "endValue": 100,
                  "innerRadius": "105%",
                  "radius": "122%",
                  "gradientRatio": [0, 0, -0.5],
                  "startValue": 0
                }, {
                  "color": "#63c704",
                  "endValue": 0,
                  "innerRadius": "105%",
                  "radius": "122%",
                  "gradientRatio": [0.5, 0, -0.5],
                  "startValue": 0
                }]
              }],
              "arrows": [{
                "alpha": 0,
                "innerRadius": "0px",
                "nailRadius": 0,
                "radius": "0%"
              }]
            });


            var chart2 = AmCharts.makeChart("chartdiv2", {
              "theme": "light",
              "type": "gauge",
              "axes": [{
                "topTextFontSize": 17,
                "topTextYOffset": 108,
                "topTextColor":"#9797a6",
                "color": "#9797a6",
                "axisColor": "#9797a6",
                "axisThickness": 2,
                "endValue": 100,
                "gridInside": true,
                "inside": true,
                "radius": "90%",
                "valueInterval": 20,
                "tickColor": "#9797a6",
                "startAngle": -140,
                "endAngle": 140,
                "unit": "M",
                "bandOutlineAlpha": 0,
                "bands": [{
                  "color": "#d9d9e3",
                  "endValue": 100,
                  "innerRadius": "105%",
                  "radius": "122%",
                  "gradientRatio": [0, 0, -0.5],
                  "startValue": 0
                }, {
                  "color": "#63c704",
                  "endValue": 0,
                  "innerRadius": "105%",
                  "radius": "122%",
                  "gradientRatio": [0.5, 0, -0.5],
                  "startValue": 0
                }]
              }],
              "arrows": [{
                "alpha": 0,
                "innerRadius": "0px",
                "nailRadius": 0,
                "radius": "0%"
              }]
            });

            setInterval(randomValue, 2000);

            // set random value
            function randomValue() {
              var value = 80;
              chart1.arrows[0].setValue(value);
              chart1.axes[0].setTopText(value + "\n Mbps");
              // adjust darker band to new value
              chart1.axes[0].bands[1].setEndValue(value);
            }
            </script>

            <!-- HTML -->
            <div id="chartdiv1"></div>
            <div id="chartdiv2"></div>

Answer 1

区分功能

    function randomValue1() {
    var value = 80;
    chart1.arrows[0].setValue(value);
    chart1.axes[0].setTopText(value + "\n Mbps");
     // adjust darker band to new value
     chart1.axes[0].bands[1].setEndValue(value);
      }

    function randomValue() {
    var value = 40;
    chart2.arrows[0].setValue(value);
    chart2.axes[0].setTopText(value + "\n Mbps");
     // adjust darker band to new value
      chart2.axes[0].bands[1].setEndValue(value);
     }

如何在一个页面中显示两个amcharts？

1 个答案: