我想创建一个应该是网络响应的 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
有谁知道如何让它响应网络?
最佳答案
图表不会自动调整大小。您必须设置一个在调整大小时调用 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% 不会执行任何操作;同样,Gauge 的高度和宽度由较小的尺寸决定。因此,如果您在不指定容器 #test
(或其父容器)高度的情况下增加屏幕尺寸,则可能的结果是图表不会改变尺寸。
关于javascript - 使 Google Chart Gauge 具有响应能力,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18979535/