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已经响应了，但是当我调整窗口大小时，里面的图形会被切断......

任何sugestions？

Answer 1

首先，您可以依赖谷歌的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ANDORContainer" style="margin-bottom: 10px;"> <select class="ddlANDOR" data-count="0"> <option value="">---Add On Statement---</option> <option value="AND">Both Statements are True</option> <option value="OR">Either Statement is True</option> </select> </div>来了解文档何时准备就绪，
而不是 - ＆gt; callback

并且$(document).ready(...可以放在callback语句中每次需要绘制图表时都不需要使用load

建议设置类似于以下代码段...

setOnLoadCallback

谷歌图表响应

1 个答案: