让Google Chart Gauge响应 [英] Make Google Chart Gauge responsive

问题描述

我想创建一个应该能够网络响应的Google Gauge图表。
我听说将宽度设置为'100％'应该可以解决，但实际上并没有做任何改变。

以下您可以看到我的代码。

 < script type ='text / javascript'> 
 google.load（'visualization'，'1'，{packages：['gauge']}）; 
 google.setOnLoadCallback（drawChart）; 
函数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）; 调整大小的事件处理程序：

<$ p $ $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' 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％; 
宽度：100％; 
} 
  

请注意以下几点：将高度设置为100％不会除非父元素具有特定的高度;另外，测量仪的高度和宽度由较小的尺寸确定。所以如果你增加屏幕的大小而不指定容器的高度 #test （或者它的父容器），可能的结果是图表不会改变大小。

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>

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); 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. You will need to set those in CSS for your container 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; 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屋！