Google图表响应式

Question

所以我有这个函数来画一张图，我已经对它做了一些修改，试图使图表响应，但我不能做到这一点…

下面是函数：

$(document).ready(function(){
                google.charts.load('current', {'packages': ['corechart']});
                //alert('aa00'~
                                    $('.error').hide();
                                    $(".buttonSala").click(function() {
                                      // validate and process form here
                                      $('.error').hide();
                                      var nome = $( "#nomeSala option:selected" ).val();
                                      var objeto = $( "#sensorSala option:selected" ).val();
                                      var canal = $( "#canalSala option:selected" ).val();
                                      var datai = $("#datainisala").val(); 
                                      var dataf = $("#datafimsala").val(); 

                                     //alert(canal);
                                       // Send the data using post
                                       var posting = $.post( "getSala.php", { canal: canal, dataini: datai, datafim: dataf, objeto: objeto } );

                                       // Put the results in a div
                                        posting.done(
                                            function drawChart1( data ) {
                                            // Set a callback to run when the Google Visualization API is loaded.

                                                $('.box-title').html(nome);
                                                var response = JSON.parse(data);
                                                var jsonData = response.channels[canal].values;
                                                var desciption = response.channels[canal].info.chname;
                                                google.charts.setOnLoadCallback(function() {
                                                dataArray = [["ts", desciption ]];

                                                for (var i = 0; i < jsonData.length; i++)
                                                {
                                                    var tempArray = [jsonData[i].ts, parseFloat(jsonData[i].value.replace(",", "."))];
                                                    dataArray.push(tempArray);
                                                }

                                                // Create our data table out of JSON data loaded from server.
                                                var data = google.visualization.arrayToDataTable(
                                                        dataArray
                                                        );                

                                                var options = {
                                                  curveType: 'function',
                                                  backgroundColor: '#fff',
                                                  colors: ['#5d4a50'],
                                                  vAxis: {
                                                    gridlines: {
                                                        color: 'transparent'
                                                    },
                                                    textStyle: {
                                                        color: '#666', fontSize: 16
                                                    }
                                                  },
                                                  legend: { position: 'bottom', textStyle: {
                                                        color: '#666', fontSize: 18
                                                    } }
                                                };

                                                // Instantiate and draw our chart, passing in some options.
                                                var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                                                chart.draw(data, options);

                                                }
                                            );
                                        });

                                          $(window).resize(function(){
                                          drawChart1();
                                        });


                    return false;
                                    });

                                  });

然后我已经在我的css中添加了这个：

.chart {
  width: 100%; 
  min-height: 450px;
}

我的html是这样的：

<div class="row">
          <div class="col-md-12">
            <div id="chart_div" class="chart"></div>
          </div>
          </div>

但是图形仍然没有响应...绘制图形的div已经响应了，但是当我调整窗口大小时，里面的图形就被剪切了……

有什么建议吗？

Answer 1

首先，您可以依靠来自谷歌的callback来了解文档何时准备就绪，

而不是--> $(document).ready(...

并且可以将callback放在load语句中，

无需在每次需要绘制图表时都使用setOnLoadCallback

推荐与以下代码片段类似的设置...

google.charts.load('current', {
  callback: function () {
    var googleChart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    var googleData = null;

    $('.buttonSala').click(getData);
    $(window).resize(drawChart);

    function getData() {
      $('.error').hide();
      var nome = $( "#nomeSala option:selected" ).val();
      $('.box-title').html(nome);
      var objeto = $( "#sensorSala option:selected" ).val();
      var canal = $( "#canalSala option:selected" ).val();
      var datai = $("#datainisala").val();
      var dataf = $("#datafimsala").val();
      var posting = $.post( "getSala.php", { canal: canal, dataini: datai, datafim: dataf, objeto: objeto } );
      posting.done(processData);
      return false;
    }

    function processData(data) {
      var response = JSON.parse(data);
      var jsonData = response.channels[canal].values;
      var desciption = response.channels[canal].info.chname;
      dataArray = [["ts", desciption ]];

      for (var i = 0; i < jsonData.length; i++) {
        dataArray.push([
          jsonData[i].ts,
          parseFloat(jsonData[i].value.replace(",", "."))
        ]);
      }

      var googleData = google.visualization.arrayToDataTable(
        dataArray
      );
      drawChart();
    }

    function drawChart() {
      if (googleData === null) {
        return;
      }
      googleChart.draw(googleData, {
        curveType: 'function',
        backgroundColor: '#fff',
        colors: ['#5d4a50'],
        vAxis: {
          gridlines: {
            color: 'transparent'
          },
          textStyle: {
            color: '#666',
            fontSize: 16
          }
        },
        legend: {
          position: 'bottom',
          textStyle: {
            color: '#666', fontSize: 18
          }
        }
      });
    }
  },
  packages: ['corechart']
});