Question

我尝试使用以下代码，在调整窗口大小时重新调整Google图表的大小。

... <div id="demo-chart"></div>...

名为 test.json 的我的JSON文件将具有此代码

[["Date","Visitors"],["May 16,2013",67],["May 17,2013",3],["May
18,2013",0],["May 19,2013",0],["May 20,2013",0],["May
21,2013",1],["May 22,2013",0]]

我的Javascript代码将是，

<script src="http://www.google.com/jsapi"></script>
<script>

    function loadData(fileName) { 
        //  $.getJSON( fileName)
        return  $.ajax({
                 url: fileName,
                 dataType: "json",
                 async: false,
                 }).responseText;
    }
            drawVisitorsChart = function()
            {
                var myFile = "test.json";
                var jsonData= loadData(myFile);
                var obj = jQuery.parseJSON(jsonData);
                var data = new google.visualization.arrayToDataTable(obj);
                var div = $('#demo-chart'),
                    divWidth = div.width();
                new google.visualization.LineChart(div.get(0)).draw(data, {
                    title: 'Monthly unique visitors count',
                    width: divWidth,
                    height:180,
                    legend: 'right',
                    yAxis: {title: '(thousands)'},
                    backgroundColor:  '#494C50',
                    legendTextStyle: { color: 'white' },
                    titleTextStyle: { color: 'white' },
                    hAxis: {
                        textStyle: { color: 'white' }
                    },
                    vAxis: {
                        textStyle: { color: 'white' },
                        baselineColor: '#666666'
                    },
                    chartArea: {
                        top: 35,
                        left: 30,
                        width: divWidth-40
                    },
                    legend: 'bottom'
                });


            };

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {
            'packages': ['corechart']
        });

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawVisitorsChart);

        // Watch for block resizing
        window.onresize = drawVisitorsChart;


    </script>

这适用于使用Google AJAX数据调整窗口大小。但是这里调整每个窗口大小调整AJAX数据可能会使浏览器冻结。

调整窗口大小时，是否有更好的方法可以使用AJAX数据调整Google图表的大小？

Answer 1

我尝试使用以下代码，它可以正常工作

    <script> (function($,sr){
        var debounce = function (func, threshold, execAsap) {
          var timeout;

          return function debounced () {
              var obj = this, args = arguments;
              function delayed () {
                  if (!execAsap)
                      func.apply(obj, args);
                  timeout = null; 
              };

              if (timeout)
                  clearTimeout(timeout);
              else if (execAsap)
                  func.apply(obj, args);

              timeout = setTimeout(delayed, threshold || 100); 
          };   }    // smartresize      $.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };   })($,'smartresize'); </script> <script>    google.load('visualization', '1', {         'packages': ['corechart']   });     var options, data, chart;       function loadData() {       //  $.getJSON( fileName)         var myFile = "test.json";      return  $.ajax({
                     url: myFile,
                     dataType: "json",
                     async: false,
                     }).responseText;   }   // Load the Visualization API and the piechart package.
                var chartInit = false;

        $(function(){                    google.setOnLoadCallback(drawVisitorsChart);
              function  drawVisitorsChart()
                {

                    var jsonData= loadData();
                    // $('#json-data').attr('data-dataset',jsonData);
                    var obj = jQuery.parseJSON(jsonData);  
                    data = new google.visualization.arrayToDataTable(obj);
                    var div = $('#demo-chart'),
                        divWidth = div.width();
                        options = {

                                    title: 'Monthly unique visitors count',
                    width: '100%',
                    height:180,
                    legend: 'right',
                    yAxis: {title: '(thousands)'},
                    backgroundColor:  '#494C50',
                    legendTextStyle: { color: 'white' },
                    titleTextStyle: { color: 'white' },
                    hAxis: {
                        textStyle: { color: 'white' }
                    },
                    vAxis: {
                        textStyle: { color: 'white' },
                        baselineColor: '#666666'
                    },
                    chartArea: {
                        top: 35,
                        left: 30,
                        width: divWidth-40
                    },
                    legend: 'bottom'
                                };

                    chart = new google.visualization.LineChart(document.getElementById('demo-chart'));
                    chart.draw(data, options);

                }           // Set a callback to run when the Google Visualization API is loaded.           google.setOnLoadCallback(drawVisitorsChart);        
});
            // Watch for block resizing     
    $(window).smartresize(function () {   
        chart.draw(data, options); 
    });

        </script>

使用窗口调整大小事件的AJAX数据调整Google图表的大小？

1 个答案: