定义函数按钮javascript

definition function button javascript

本文关键字:javascript 按钮 函数 定义      更新时间:2023-09-26

这是我在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);

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

如果您想使用.thoggle()

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