0

这是我的 JavaScript 代码；我有一个从数据源获取数据的饼图。现在我想在我的页面中添加一个按钮，当我单击它时，我可以看到我的饼图。

我想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 回答