显示数据

我有一个谷歌散点图这样的：显示数据

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Age', 'Weight'], 
      [ 8,  12], 
      [ 4,  5.5], 
      [ 11,  14], 
      [ 4,  5], 
      [ 3,  3.5], 
      [ 6.5, 7] 
     ]); 

     var options = { 
      title: 'Age vs. Weight comparison', 
      hAxis: {title: 'Age', minValue: 0, maxValue: 15}, 
      vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, 
      legend: 'none' 
     }; 

     var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

我想当点击一个圆，只示出那些从已选定圆的半径X内的循环。任何想法？？谢谢！

来源

2013-10-31 Jimmysnn

您需要筛选DataTable以获取选定点的给定半径内的所有点。下面是一些代码，会为你做到这一点：

google.visualization.events.addListener(chart, 'select', function() { 
    var selection = chart.getSelection(); 
    if (selection.length > 0) { 
     // get all data points within radius r of the selected point 
     var r, x, y; 
     r = <the radius to use>; 
     x = data.getValue(selection[0].row, 0); 
     y = data.getValue(selection[0].row, 1); 

     var rows = []; 
     for (var i = 0, count = data.getNumberOfRows(), dx, dy; i < count; i++) { 
      dx = data.getValue(i, 0) - x; 
      dy = data.getValue(i, 1) - y; 
      if (Math.sqrt(dx * dx + dy * dy) <= r) { 
       rows.push(i); 
      } 
     } 
     // do something with filtered rows 
    } 
});

这里有一个验证的概念，展示它是如何工作的：http://jsfiddle.net/asgallant/tgshL/

来源

2013-10-31 21:39:48 asgallant

回答

相关问题