[英]Make Google Chart Gauge responsive
我想创建一个应该响应网络的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>
请看我的例子。 示例测试
有谁知道如何使其响应网络?
图表不会自动调整大小。 您必须设置一个调用chart.draw(data, options);
的事件处理程序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
(或它的父容器)的高度的情况下增加屏幕的大小,可能的结果是图表不会改变大小。
你可以只选择100%的宽度选项和响应的div标签,宽度=“100%”,或者在这里你可以看到现场演示的小提琴链接。
//这里的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%',
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.