4

ユーザーが特定のバーをクリックしたときに、Google の Chart API を使用して新しい BarChart の作成をトリガーしようとしています。私は概念を理解していると思います。少なくとも getSelection() 関数を機能させて、ユーザーがクリックしたバーを表示したかったのです。しかし、毎回、バーをクリックすると、ディスプレイがフリーズし、Java アラートは表示されません。何かご意見は？

コードは次のとおりです。

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

1 に答える 1

11

ただ疑問に思っているのは、行が

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

なれ

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

?

これが私の実際の例です。データとグラフをグローバル変数として設定する必要がありました。

<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>
于 2011-11-01T12:09:05.723 に答える