放大谷歌可視化圖表的選定區域

我正在研究谷歌可視化圖表。我希望當我選擇特定區域的圖表時，我可以放大該特定的選定區域。我也希望它做同樣的折線圖，柱狀圖，餅圖放大谷歌可視化圖表的選定區域

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      google.load("visualization", "1", {packages:["corechart"]}); 
      google.setOnLoadCallback(drawChart); 
      function drawChart() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Date'); 
      data.addColumn('number', 'Company1'); 
      data.addColumn('number', 'Company2'); 
      data.addColumn('number', 'Company3'); 
      data.addColumn('number', 'Company4'); 
      data.addColumn('number', 'Company5'); 
      data.addColumn('number', 'Company6'); 
      data.addRows([ 
       ['Feb 1, 2012 - Feb 28, 2012', 10, 10, 5, 15, 10, 55] 
      ]); 
      data.addRows([ 
       ['Mar 1, 2012 - Mar 31, 2012', 10, 10, 5, 15, 10, 55] 
      ]); 
      var options = { 
       title: 'Total Reviews', 
       hAxis: {title: '', titleTextStyle: {color: 'blue'}} 
      }; 
      var chart = new google.visualization.ColumnChart(document.getElementById('total')); 
      chart.draw(data, options); 
      google.visualization.events.addListener(chart, 'select', function() { 
       var selection = chart.getSelection()[0]; 
       var label = data.getColumnLabel(selection.column); 
       // alert(label); //SOMETHING GOES HERE TO MAKE IT ZOOOM 
      }) 
      }  
     </script> 
     </head> 
     <body> 
     <div id="total" style="width: 600px; height: 400px;"></div> 
     </body> 
    </html>

來源

2013-08-29 Digitallalit

我不明白你的意思，「放大」。你能詳細說明嗎？ –

當我選擇圖表的特定區域時，它會縮放該區域。 – Digitallalit

好的，對於餅圖，這是什麼意思？ –

據我所知，並通過配置選項，您應該能夠使用一個選項叫做explorer

// before you pass the options to the drawing function 
options.explorer = { 
    actions: ['dragToZoom', 'rightClickToReset'] 
    /* you can add more options */ 
}

請看看在the line chart API的explorer和其它選項，閱讀筆記

注：Explorer只用連續軸工程（如作爲數字或日期）。

所以你的榜樣域列數據必須轉化爲實際Date對象，如果你這樣做你的第一列應定義爲

data.addColumn('date','Date');

或我的首選方式

data.addColumn({role:'domain', type:'date', label:'Date'});

來源

2016-04-10 17:15:31 hanzo2001

你必須使用explorer.actions。在Google區域圖表中

The Google Charts explorer supports three actions

dragToPan:拖動以在水平和垂直方向上平移圖表。要僅沿水平軸平移，請使用explorer: { axis: 'horizontal' }。對於垂直軸同樣如此。

dragToZoom:資源管理器的默認行爲是在用戶滾動時放大和縮小。如果使用explorer: { actions: ['dragToZoom', 'rightClickToReset'] }，拖動矩形區域會放大該區域。 Google建議在使用dragToZoom時使用rightClickToReset。見

explorer.maxZoomIn, explorer.maxZoomOut, and explorer.zoomDelta for zoom customizations.

rightClickToReset:右擊圖表返回到原來的平移和縮放級別

更多細節Google Area Chart Customize

來源

2017-05-30 07:10:59

放大谷歌可視化圖表的選定區域

回答

相關問題