1

ウィンドウのサイズが変更されたときに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 チャートのサイズを変更するより良い方法はありますか?

4

1 に答える 1

2

次のコードで試してみましたが、動作します

    <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>
于 2013-05-24T07:37:15.830 に答える