HTML Div not Showing



我有一个查询:我的HTML代码显示了一些SVG规格(取自google-chartdiv),我想在我的页面上显示它两次,但它第一次出现,之后无论我在HTML代码中放置多少,它都不显示。如何在一个HTML页面中多次显示它。请建议。

  <div class="col-md-3">
  <div class="row no-gutter">
  <div class="col-md-12 gage">
  <h1>Avg Handle Time (Sec)</h1>
  <div id="chartdiv" style="width:350px; height:300px;"></div>
  <span>@ViewBag.Name</span>
  </div>
  <div class="col-md-6">
  <div class="row no-gutter">
  <div class="col-md-12 gage">
  <h1>Service Level %</h1>
  <div id="chartdiv" style="width:350px; height:300px;"></div>
  <span>@ViewBag.Age</span>
   </div>
我的chartdiv代码是:
<script>
        var chart;
        var arrow;
        var axis;
        AmCharts.ready(function () {
            // create angular gauge
            chart = new AmCharts.AmAngularGauge();
            chart.addTitle("Speedometer");
            // In gauge.js   has Nailradius , set the circular bottom of needle from there
            // create axis
            axis = new AmCharts.GaugeAxis();
            axis.startValue = 0;
            axis.axisThickness = 5;
            axis.valueInterval = 50;
            axis.endValue = 300;
            // color bands
            var band1 = new AmCharts.GaugeBand();
            band1.startValue = 0;
            band1.endValue = 180;
            band1.innerRadius = "94%"; // The thickness of Color Scheme lesser % = thick color
            band1.color = "#00CC00";
            var band2 = new AmCharts.GaugeBand();
            band2.startValue = 180;
            band2.endValue = 240;
            band2.color = "#ffac29";
            band2.innerRadius = "94%"; // The thickness of Color Scheme lesser % = thick color
            var band3 = new AmCharts.GaugeBand();
            band3.startValue = 240;
            band3.endValue = 300;
            band3.color = "#ea3838";
            band3.innerRadius = "94%";  // The thickness of Color Scheme lesser % = thick color
            axis.bands = [band1, band2, band3];
            // bottom text
            axis.bottomTextYOffset = -20;
            axis.setBottomText("0 km/h");
            chart.addAxis(axis);
            // gauge arrow
            arrow = new AmCharts.GaugeArrow();
            arrow.color = "#0000";  // Arrow color set to Black
            arrow.startWidth = "10";  //This is the width of Arrow connection with Base Circle
            arrow.radius = "100";  // This is the area covered by needle during motion
            chart.addArrow(arrow);
            chart.write("chartdiv1");
            // change value every 2 seconds
            setInterval(randomValue, 2000);
        });
        // set random value
        function randomValue() {
            var value = Math.round(Math.random() * 200);
            arrow.setValue(value);
            axis.setBottomText(value + " km/h");
        }
    </script>

问题是HTML文件中引用的CSS脚本。我给出了错误的路径的CSS文件有我的SVG标准。一条路径是正确的,而另一条路径没有指向正确。

最新更新