javascript 使 Google Chart Gauge 具有响应性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18979535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Google Chart Gauge responsive
提问by joelschmid
I would like to create a Google Gauge charts which should be web-responsive. I heard about setting the width to '100%' should work out, but it actually doesn't make any changes.
我想创建一个应该响应网络的 Google Gauge 图表。我听说将宽度设置为“100%”应该可以解决，但实际上并没有做任何更改。
Following you can see my code.
下面你可以看到我的代码。
<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>
Please see my example .Example Test
请看我的例子。示例测试
Does anyone know how to make it web-responsive?
有谁知道如何让它响应网络？
回答by asgallant
The charts will not resize automatically. You must set up an event handler that calls chart.draw(data, options);on resize:
图表不会自动调整大小。您必须设置一个调用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);
}
}
Setting heightand widthto 100% in the options won't do anything for you. You will need to set those in CSS for your container div:
在选项中将height和设置width为 100% 不会为您做任何事情。您需要在 CSS 中为您的容器 div 设置这些：
#test {
height: 100%;
width: 100%;
}
Keep in mind a few things: setting height to 100% doesn't do anything unless the parent element has a specific height; also, the height and width of a Gauge are determined by the smaller of the dimensions. So if you increase the size of the screen without specifying the height of the container #test(or it's parent container), the likely outcome is that the chart won't change size.
请记住一些事情：除非父元素具有特定的高度，否则将高度设置为 100% 不会做任何事情；此外，仪表的高度和宽度由尺寸中的较小者决定。因此，如果您在不指定容器#test（或其父容器）的高度的情况下增加屏幕的大小，则可能的结果是图表不会改变大小。
回答by joelschmid
You can just just assign the width 100% in options and a responsive div tag with width="100%" or here goes fiddlelink where you can see the live demo.
您可以只在选项中指定宽度 100% 和宽度为“100%”的响应式 div 标签，或者在这里可以看到现场演示的小提琴链接。
//html here
//这里是html
<div class="row">
<div class="col-xs-12 col-sm-6">
<div id="chart_div"></div>
</div>
</div>
//js here
//这里是js
var options = {'title':'How Much Pizza I Ate Last Night',
'width':'100%',
};
