Question

我希望有一个快速响应的谷歌饼图。

我所做的是 -

<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>

  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart()
    {
      var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
      ]);

      var options = {
                      title: 'My Daily Activities',
                      is3D: true,
                      animation:
                      {
                        duration: 1000,
                        easing: 'in',
                      },
                      width: '100%',
                      height: '100%',
                      legend:'none',
                      pieSliceText: 'percentage',
                      chartArea:
                      {
                          left: "0%",
                          top: "0%",
                          height: "100%",
                          width: "100%"
                      }
                    };

      var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div style="width: 100%; height: 100%;">
    <div id="piechart_3d" style="width: inherit; height: inherit;"></div>
  </div>
</body>
</html>

但它没有回应。

有人可以帮我吗？

Answer 1

我已经解决了 -

<强> HTML -

<html>
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <!-- <div id="piechart"> -->
          <div id="piechart" style="width: 100%; height: 100%;">
            <!-- Chart goes here -->
          </div>
        </div>
      </div>
    </div>
  </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="js/chart.js"> </script>
</html>

<强> JS -

google.load("visualization", "1", {packages:["corechart"]});
function drawData()
{
  var dataArray =[['Task', 'Hours per Day']];
  var arr1=['Work','Eat','Commute','Watch TV','Sleep'];
  var arr2=[11,2,2,2,7]; 
  for(var n=0; n < arr2.length; n++)
  { 
    dataArray.push([arr1[n], parseInt(arr2[n])]);
  }
  var data = new google.visualization.arrayToDataTable(dataArray);
  var options = {
                  title: 'My Daily Activities',
                  is3D: true,
                  width: '100%',
                  height: '100%',
                  chartArea:
                  {
                      left: "0%",
                      top: "10%",
                      height: "90%",
                      width: "100%"
                  }
                };
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
//google.setOnLoadCallback(drawData);

$(function()
{
  console.log("loaded");
  drawData();
});

$( window ).resize(function()
{
  console.log("resize");
  drawData();
});

响应式Google Piechart

1 个答案: