使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);的事件處理程序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％不會做任何事情; 另外，儀表的高度和寬度由較小的尺寸決定。 因此，如果在不指定容器#test （或它的父容器）的高度的情況下增加屏幕的大小，可能的結果是圖表不會改變大小。

Answer 2

你可以只選擇100％的寬度選項和響應的div標簽，寬度=“100％”，或者在這里你可以看到現場演示的小提琴鏈接。

//這里的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%',
                  };