[英]Make Google Chart Gauge responsive
I would like to create a Google Gauge charts which should be web-responsive. 我想创建一个应该响应网络的Google Gauge图表。 I heard about setting the width to '100%' should work out, but it actually doesn't make any changes. 我听说将宽度设置为'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? 有谁知道如何使其响应网络?
The charts will not resize automatically. 图表不会自动调整大小。 You must set up an event handler that calls chart.draw(data, options);
您必须设置一个调用chart.draw(data, options);
的事件处理程序chart.draw(data, options);
on resize: 调整大小:
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 height
and width
to 100% in the options won't do anything for you. 在选项中将height
和width
设置为100%将不会为您做任何事情。 You will need to set those in CSS for your container div: 您需要在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; 请记住以下几点:除非父元素具有特定高度,否则将高度设置为100%不会做任何事情; 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. 因此,如果在不指定容器#test
(或它的父容器)的高度的情况下增加屏幕的大小,可能的结果是图表不会改变大小。
You can just just assign the width 100% in options and a responsive div tag with width="100%" or here goes fiddle link where you can see the live demo. 你可以只选择100%的宽度选项和响应的div标签,宽度=“100%”,或者在这里你可以看到现场演示的小提琴链接。
//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%',
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.