getSelection (), um Daten von der Zeile in die Google-Chart-API

Ich versuche zum auslösen der Erstellung einer neuen BarChart mit der Google Chart API erstellt, wenn ein Benutzer klickt auf eine bestimmte bar. Ich glaube, ich verstehe die Konzepte, und wollte wenigstens die getSelection () - Funktion arbeiten und zeigen, was bar der Benutzer geklickt hat. Aber jedes mal, wenn Sie klicken Sie auf die Leiste, ist es nur friert mit dem display und keine java-alert. Irgendwelche Gedanken?

Hier der code:

<script type="text/javascript">
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var visualization = new google.visualization.BarChart(document.getElementById('acctmeta'));
                var json_data = new google.visualization.DataTable({{acctmeta_json}});          

                visualization.draw(json_data, {width: 850, height: 600, title: 'Collection Level Populated Metadata Fields',
                                  chartArea: {width:"50%"},
                                  vAxis: {title: 'Collection Title/ID', titleTextStyle: {color: 'green'}},
                                  hAxis: {logScale:false, title:'Fields Populated', titleTextStyle: {color: 'green'}}
                                 });

                //Add our selection handler.
                google.visualization.events.addListener(visualization, 'select', selectHandler);


                //The selection handler.
                //Loop through all items in the selection and concatenate
                //a single message from all of them.
                function selectHandler() {        
                  alert(data.getValue(chart.getSelection()[0].row, 0));
                }

            } //end of draw chart function          
            </script>

InformationsquelleAutor Graham Hukill | 2011-09-07

  1. 11

    Nur Wundern, sollte die Leitung

    alert(data.getValue(chart.getSelection()[0].row, 0));

    werden

    alert(data.getValue(visualization.getSelection()[0].row, 0));

    ?

    Hier ist ein funktionierendes Beispiel von mir. Ich musste die Daten und das Diagramm als Globale Variablen:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);    
  var data; 
  var chart;
  function drawChart() {
   data = new google.visualization.DataTable();  
   data.addColumn('string', 'Where');
   data.addColumn('number', 'What');
   data.addRows([['ABC',87],['ERT',70],['KLJ',38],['UPP',-67],['SSD',27],['UKG',42],['NUS',60],['WEB',96]]);
   var options = {'title':'my chart','width':'600','height':'400','is3D':'true'};
   chart = new google.visualization.ColumnChart(document.getElementById('test3_chart'));
   chart.draw(data, options);
   google.visualization.events.addListener(chart, 'select', selectHandler2);
  }

  function selectHandler2() {
      var selection = chart.getSelection();
      alert('That\'s column no. '+selection[0].row);
  }
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
  <div id=test3_chart>Please wait...</div>
</body>
</html>
    ausgezeichnete Antwort.. hat mir sehr geholfen.

    InformationsquelleAutor deensdale

Schreibe einen Kommentar