響應谷歌Piechart

我想有一個響應谷歌餅圖。響應谷歌Piechart

我已經是 -

<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>

做，但它沒有響應。

任何人都可以幫助我嗎？

來源

2015-09-28 Abrar Jahin

我不知道這件事，但你肯定谷歌API可以產生響應圖表？也許在問題中添加API文檔的鏈接以幫助其他用戶。 – kebs

是的，我確定。但如果沒有，請給我任何其他rsponive餅圖請@kebs –

我已經解決了它 -

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(); 
});

來源

2015-09-29 06:28:29

可能工作（沒有測試），但似乎你正在使用額外的依賴（bootstrap）。所以我明白，因爲「我必須使用bootstrap來使其工作」。我錯了嗎？如果是這樣，這與您的其他評論相矛盾，即Google API可以單獨生成響應式圖表。 – kebs

響應谷歌Piechart

回答

相關問題