0

これは私の JavaScript のコードです。データソースからデータを取得する PieChart が 1 つあります。ここで、ページにボタンを 1 つ追加して、クリックすると PieChart が表示されるようにします。

function drawボタンで定義したい。

HTML:

<input id="drawChart" type="button" value="click me" ">
<script type="text/javascript" src="google.com/jsapi"></script>;
<script src="{{=URL('static','js/XXX/code/XXXX.js')}}"></script> 
<div id="reportingContainer"></div>

!function($) {

    function getTable() {
      $.ajax({
              dataType: 'json',         
              type: 'GET',
              url: 'call/json/mytables',
              xhrFields: {
                         withCredentials: true
                },
              success: function(response) {
                  sendQuery(response[0]);
              },
          });   
        }


    $("#drawChart").click( function () {
        ?????????????????????????????
    });



    function sendQuery(cityName) {
        // You can manipulate the variable response
        // Success!  
      var query = new google.visualization.Query('http://localhost:8080/XXXXX-datasource/datasource?table='+cityName);
      // Optional request to return only column C and the sum of column B, grouped by C members.
      query.setQuery('select zone_name, sum(cost) group by zone_name');
      // Send the query with a callback function.
      query.send(drawChart);

    }
    function initialize() {
            var $newDiv = $('<div>').attr('id','chart_div');
            $('#reportingContainer').append($newDiv);
  // Replace the data source URL on next line with your data source URL.
  // Specify that we want to use the XmlHttpRequest object to make the query.
           getTable();
    }  
     function drawChart(response) {
         if (response.isError()) {
         alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
         return;
    }   
         var data = response.getDataTable();
         var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
         var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
         chart.draw(data, options);
    }   

}(jQuery);
4

1 に答える 1

0

getTable()円グラフを呼び出す関数が正しい場合は、以下を試してください

$("#drawChart").on('click', function () {
        getTable();  //?????????????????????????????
    });

を呼び出すと、getTableに移動しますdrawChart。

アップデート:

divにはIDが付いているので、こんな感じで試すことができます

function initialize() {
            var $newDiv = $('<div>').attr('id','chart_div');            
            $('#reportingContainer').append($newDiv);

            $($newDiv).hide();  //hide the div here

  // Replace the data source URL on next line with your data source URL.
  // Specify that we want to use the XmlHttpRequest object to make the query.
           getTable();
    }

ボタンクリックで表示する

$("#drawChart").on('click', function () {
       $('#chart_div').show(); //If it is visible hide it or vice versa
    });

.toggle ()に行きたい場合

$("#drawChart").on('click', function () {
       $('#chart_div').toggle(); //If it is visible hide it or vice versa
    });
于 2013-07-25T12:14:25.840 に答える