Javascript 让谷歌图表计量器具有响应性

我想创建一个谷歌仪表图表，应该是网络响应。 我听说将宽度设置为“100%”应该行得通，但实际上没有做任何更改

下面你可以看到我的代码

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

load（'visualization'，'1'，{packages:['gauge']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Label'，'Value']，
[‘幸福’，40]，
]);
变量选项={
宽度：“100%”，高度：“100%”，
红色从：0，红色到：40，
黄色从：40，黄色到：70，
格林From:70，格林To:100，
米诺蒂克斯：5
};
var chart=new google.visualization.Gauge（document.getElementById（'test'）；
图表绘制（数据、选项）；
}

请看我的例子

---

有人知道如何使其响应web吗？

图表不会自动调整大小。必须设置调用

chart.draw（数据、选项）的事件处理程序调整大小时：

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

在选项中将
高度
和
宽度
设置为100%对您没有任何帮助。您需要在CSS中为您的容器div设置：

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

请记住几件事：除非父元素具有特定的高度，否则将height设置为100%不会起任何作用；此外，量规的高度和宽度由较小的尺寸决定。因此，如果您在不指定容器高度的情况下增加屏幕的大小
#test
（或其父容器），很可能的结果是图表的大小不会改变。
您只需在选项中指定100%的宽度和一个带有width=“100%”的响应div标记，或者您可以看到实时演示的链接

//这里是html

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

问题是.css文件中的某些设置。。。设置为“100%”后，一切正常：）谢谢！在选项中将宽度设置为“100%”无效！！看看这个。
 var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':'100%',
                  };