Question

我有一个查询：我的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>

Answer 1

问题在于HTML文件中引用的CSS脚本。我用SVG测量仪给出错误的CSS文件路径。一条路是正确的，而另一条路没有指向正确。

HTML Div没有显示

1 个答案: