Question

我需要设置一个动画饼图，显示网站中容器内的百分比级别。我尝试添加此Google Api图表但在容器内部时不会显示。

有没有更好的方法来实现这一目标？

感谢。

1.这是饼图形图形的代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
        google.charts.load("current", {packages:["corechart"]});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
          var data = google.visualization.arrayToDataTable([
            ['Pac Man', 'Percentage'],
            ['', 75],
            ['', 25]
          ]);

          var options = {
            legend: 'none',
            pieHole: 0.3,
          pieSliceBorderColor: 'blue',
            pieSliceText: 'none',
            pieStartAngle: 135,
            tooltip: { trigger: 'none' },
            slices: {
              0: { color: 'blue' },
              1: { color: 'transparent' }
            }
          };

          var chart = new google.visualization.PieChart(document.getElementById('pacman'));
          chart.draw(data, options);
        }
      </script>
  <body>
 <div id="pacman" style="width: 900px; height: 500px;"></div>
</body>

这是网站中容器的代码：

<section id="screenshot" class="section">
    <div class="container">
      <div class="section-header">
        <h1 class="section-title wow fadeInRight" data-wow-duration="1000ms" data-wow-delay="300ms">Skills</h1>
        <h2 class="section-subtitle wow fadeInRight" data-wow-duration="1000ms" data-wow-delay="400ms">Software</h2>
      </div>
    </div>
    <div class="row" style="margin:0; padding:0;">
      <div class="col-md-4 col-sm-6 col-xs-12" style="margin:0; padding:0;">
        <div class="portfolio">
          <figure class="effect-julia">
            <img src="img/portfolio/img1.jpg" alt="">
            <figcaption>
              <div class="heading">
                <h3></h3>
                <p>
                  WEB 
                </p>
              </div>
              <div class="icon">
                <i class="mdi-content-add-circle-outline"></i>
              </div>
            </figcaption>
          </figure>
        </div>
      </div>

为什么Google Chart未显示在容器中？

0 个答案: