使谷歌图表仪表响应

Make Google Chart Gauge responsive

本文关键字：仪表 响应 谷歌      更新时间：2023-09-26

我想创建一个谷歌仪表图，它应该是网络响应的。我听说将宽度设置为"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);的事件处理程序：

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（或其父容器）的高度的情况下增加屏幕大小，则可能的结果是图表不会更改大小。

您只需在选项中分配 100% 的宽度和带有 width="100%" 的响应式div 标签，或者在这里可以看到现场演示的小提琴链接。

/

/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%',
                  };
相关文章：