使Google圖表響應

我想創建一個應該能夠網絡響應的Google Gauge圖表。我聽說將寬度設置爲「100％」應該可以解決，但實際上並沒有做任何更改。使Google圖表響應

以下你可以看到我的代碼。

<script type='text/javascript'> 
     google.load('visualization', '1', {packages:['gauge']}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'], 
      ['Happiness', 40], 

     ]); 

     var options = { 
      width: '100%', height: '100%', 
      redFrom: 0, redTo: 40, 
      yellowFrom:40, yellowTo: 70, 
      greenFrom: 70, greenTo: 100, 
      minorTicks: 5 
     }; 

     var chart = new google.visualization.Gauge(document.getElementById('test')); 
     chart.draw(data, options); 
     } 
    </script>

請看我的例子。 Example Test

有誰知道如何使它對Web響應？

來源

2013-09-24 joelschmid

圖表不會自動調整大小。你必須建立一個事件處理程序，在調整大小調用chart.draw(data, options);：

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Label', 'Value'], 
     ['Happiness', 40] 
    ]); 

    var options = { 
     redFrom: 0, 
     redTo: 40, 
     yellowFrom:40, 
     yellowTo: 70, 
     greenFrom: 70, 
     greenTo: 100, 
     minorTicks: 5 
    }; 

    var chart = new google.visualization.Gauge(document.getElementById('test')); 
    chart.draw(data, options); 

    function resizeHandler() { 
     chart.draw(data, options); 
    } 
    if (window.addEventListener) { 
     window.addEventListener('resize', resizeHandler, false); 
    } 
    else if (window.attachEvent) { 
     window.attachEvent('onresize', resizeHandler); 
    } 
}

在選項設置height和width到100％，你什麼都不會做。您將需要設置那些CSS爲您div容器：

#test { 
    height: 100%; 
    width: 100%; 
}

記住幾件事情：設置高度爲100％，除非父元素具有特定的高度不會做任何事情;另外，測量儀的高度和寬度由較小的尺寸確定。因此，如果您在未指定容器高度的情況下增加屏幕大小（或其父容器），則可能的結果是圖表不會更改大小。

來源

2013-09-24 14:49:44 asgallant

的問題是在.css文件的一些設置...它設置爲 '100％' 後，一切都制定了:) 謝謝！ – joelschmid

您可以將選項中的寬度分配爲100％，並將寬度=「100％」的響應div標籤分配給fiddle鏈接，您可以在其中查看現場演示。這裏

// HTML這裏

<div class="row"> 
    <div class="col-xs-12 col-sm-6"> 
    <div id="chart_div"></div> 
    </div> 
</div>

// JS

var options = {'title':'How Much Pizza I Ate Last Night', 
        'width':'100%', 
        };

來源

2014-05-07 10:07:49

在選項中將寬度設置爲「100％」不起作用！請參閱[doc]（https://developers.google.com/chart/interactive/docs/gallery/piechart#Configuration_Options）。 – garyee

使Google圖表響應

回答

相關問題