getSelection() 从 Google Chart API 中的行获取数据

发布于 2024-12-03 04:48:14 字数 1492 浏览 0 评论 0原文

当用户单击特定栏时，我尝试使用 Google 的图表 API 触发新的条形图的创建。我想我理解这些概念，并且至少想让 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>

原文

I'm trying to trigger the creation of a new BarChart with Google's Chart API when a user clicks on a particular bar. I think I understand the concepts, and wanted to at least get the getSelection() function to work and display what bar the user clicked on. But everytime, when you click on the bar, it just freezes with the display and no java alert. Any thoughts?

Here's the 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

胡大本事 2024-12-10 04:48:14

只是想知道，这条线应该是

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>

Just wondering, should the line

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

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

Here is a working example of mine. I had to set data and chart as global variables:

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

回复收藏 0 原文

~没有更多了~