Question

所以，我在同一页面上显示了两个Google条形图。我尝试为它们创建一个事件处理程序，并将图表和数据传递给selectHandler。有人能告诉我我做错了吗？

    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawBasic);

    function drawBasic() {

     var data1 = google.visualization.arrayToDataTable([
                ['Condition', 'Frequency'],
                ['Dementia', 6081],
                ['Hypertension', 6055],
                ['Hypercholesterolemia', 6035],
       ]);

     var data2 = google.visualization.arrayToDataTable([
                    ['Medication', 'Frequency'],
                    ['Naproxen', 7632],
                    ['Plavix', 7486]
    ]);

  var options1 = {
    title: 'Medical Conditions',       
  };

  var options2 = {
    title: 'Medications',
  };

  var conditionbarchart = new google.charts.Bar(
    document.getElementById('conditions_chart'));

  conditionbarchart.draw(data1, options1);


  var medchart = new google.visualization.ColumnChart(
    document.getElementById('medications_chart'));
    medchart.draw(data2, options2);

        google.visualization.events.addListener(conditionbarchart, 'select', selectHandler(conditionbarchart, data1));

        google.visualization.events.addListener(medchart, 'select', selectHandler());
}

           function selectHandler(mychart, mydata){
             var selectedItem = mychart.getSelection()[0];
             if(selectedItem){
                   var selection = mydata.getValue(selectedItem.row, 0);
                   alert('The user selected' + selection);
                 }
           }

Answer 1

以下是回答我问题的完整解决方案：

 <html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Condition');
        data.addColumn('number', 'Frequency');
        data.addRows([
          ['Dementia', 3],
          ['Hypertension', 1],
          ['Hypercholesterolemia', 1], 
          ['Coronary artery disease', 1],
          ['Heaches', 2]
        ]);
        
        // Create the data table.
        var data2 = new google.visualization.DataTable();
        data2.addColumn('string', 'Medication');
        data2.addColumn('number', 'Frequency');
        data2.addRows([
          ['Naproxen', 3],
          ['Plavix', 1],
          ['Lasix', 1], 
          ['Insulin', 1],
          ['Neurontin', 2]
        ]);

        // Set chart options
        var options = {

     bars: 'vertical', // Required for Material Bar Charts.
     hAxis: {

        slantedText:true,
        slantedTextAngle:90
     },
     height: 400,
     backgroundColor: {fill: 'transparent'},
     legend: {position: 'none'},
     colors: ['#1b9e77']
   };
                       
        // Set chart options
        var options2 = {

     bars: 'vertical', // Required for Material Bar Charts.
     hAxis: {

        slantedText:true,
        slantedTextAngle:90
     },
     height: 400,
     backgroundColor: {fill: 'transparent'},
     legend: {position: 'none'},
     colors: ['#1b9e77']
   };
 
        // Instantiate and draw our chart, passing in some options.
        var conditionsbarchart = new google.visualization.ColumnChart(document.getElementById('conditions_chart'));
        
        var medchart = new google.visualization.ColumnChart(document.getElementById('medications_chart'));

        function selectHandler(mychart, mydata) {
          var selectedItem = mychart.getSelection()[0];
          if (selectedItem) {
            var topping = mydata.getValue(selectedItem.row, 0);
            alert('The user selected ' + topping);
          }
        }

        google.visualization.events.addListener(conditionsbarchart, 'select', function(){
         selectHandler(conditionsbarchart, data);
        });   
        conditionsbarchart.draw(data, options);
        
        google.visualization.events.addListener(medchart, 'select', function(){
         selectHandler(medchart, data2);
        });   
        medchart.draw(data2, options2);
        
        
      }
      
     

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="conditions_chart" style="width:400; height:300"></div>
    <div id="medications_chart" style="width: 400; height: 300"></div>
  </body>
</html>

1个2 Google图表的事件处理程序

1 个答案: