我想创建一个应该响应网络的Google Gauge图表。 我听说将宽度设置为'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>
请参阅我的示例。Example Test
是否有人知道如何使其响应网络?
答案 0 :(得分:17)
图表不会自动调整大小。您必须设置一个在调整大小时调用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%不会做任何事情;另外,仪表的高度和宽度由较小的尺寸决定。因此,如果在不指定容器#test
(或它的父容器)的高度的情况下增加屏幕大小,可能的结果是图表不会改变大小。
答案 1 :(得分:0)
您只需在选项中指定宽度100%,并在宽度=“100%”的响应div标签中指定,或在此处转到fiddle链接即可看到现场演示。
// html here
<div class="row">
<div class="col-xs-12 col-sm-6">
<div id="chart_div"></div>
</div>
</div>
// js here
var options = {'title':'How Much Pizza I Ate Last Night',
'width':'100%',
};