1個谷歌圖表的事件處理程序

因此，我有兩個谷歌條形圖顯示在同一頁面上。我嘗試爲它們創建一個事件處理程序，並將圖表和數據傳遞到selectHandler。有人能告訴我我做錯了什麼嗎？1個谷歌圖表的事件處理程序

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

來源

2017-09-16 AliciaGuerra

下面是完整的解決方案來回答我的問題：

<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>

來源

2017-09-18 00:11:31 AliciaGuerra

1個谷歌圖表的事件處理程序

回答

相關問題