1个事件处理程序，用于2个Google图表

Question

So, I have two Google bar charts displayed on the same page.I tried creating one event handler for both of them and passing in the chart and data into the selectHandler. 因此，我在同一页面上显示了两个Google条形图。我尝试为它们都创建一个事件处理程序，然后将图表和数据传递到selectHandler中。 Can someone tell me what I'm doing wrong? 有人可以告诉我我在做什么错吗？

    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

Here's the complete solution to answer my question: 这是回答我的问题的完整解决方案：

  <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 个解决方案

解决方案1
0 已采纳 2017-09-18 00:11:31

1个事件处理程序，用于2个Google图表

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-18 00:11:31

解决方案1
0 已采纳 2017-09-18 00:11:31