顯示數據

我有一個谷歌散點圖這樣的：顯示數據

<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

回答

相關問題