Question

这是我在JavaScript中的代码;我有一个PieChart从数据源获取数据。现在我想在我的页面中添加一个按钮，当我点击它时，我可以看到我的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);

Answer 1

如果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
    });

定义功能按钮javascript

1 个答案: