使 Google Chart Gauge 具有响应性 [英] Make Google Chart Gauge responsive
问题描述
我想创建一个响应网络的 Google Gauge 图表.我听说将宽度设置为100%"应该可行,但实际上并没有做任何更改.
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.
跟随你可以看到我的代码.
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>
请看我的例子.示例测试
有谁知道如何让它响应网络?
Does anyone know how to make it web-responsive?
推荐答案
图表不会自动调整大小.您必须设置一个在调整大小时调用 chart.draw(data, options);
的事件处理程序:
The charts will not resize automatically. You must set up an event handler that calls 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);
}
}
在选项中将 height
和 width
设置为 100% 不会为您做任何事情.您需要在 CSS 中为您的容器 div 设置这些:
Setting height
and width
to 100% in the options won't do anything for you. You will need to set those in CSS for your container div:
#test {
height: 100%;
width: 100%;
}
请记住一些事情:除非父元素具有特定的高度,否则将高度设置为 100% 不会做任何事情;此外,仪表的高度和宽度由尺寸中的较小者决定.因此,如果您在没有指定容器 #test
(或其父容器)的高度的情况下增加屏幕的大小,则可能的结果是图表不会改变大小.
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.
这篇关于使 Google Chart Gauge 具有响应性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!