使Google Chart Gauge具有响应性

Question

我想创建一个应该响应网络的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>

请看我的例子.示例测试

有谁知道如何使其响应网络？

Answer 1

图表不会自动调整大小.您必须设置一个调用chart.draw(data, options);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设置它们:

#test {
    height: 100%;
    width: 100%;
}

请记住以下几点:除非父元素具有特定高度,否则将高度设置为100%不会做任何事情; 另外,仪表的高度和宽度由较小的尺寸决定.因此,如果在不指定容器高度#test(或其父容器)的情况下增加屏幕大小,可能的结果是图表不会更改大小.