缩放谷歌可视化图表的选定区域

时间:2013-08-29 10:48:16

标签: google-visualization visualization

我正在研究Google可视化图表。我希望当我选择图表的特定区域时,我可以缩放特定的选定区域。我也希望它用折线图,条形图,饼图

来做同样的事情
    <!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>

2 个答案:

答案 0 :(得分:0)

据我所知,并查看配置选项,您应该可以使用名为explorer的选项

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

请查看explorer中的Date和其他选项并阅读说明

  

注意:资源管理器仅适用于连续轴(例如数字或日期)。

因此,您的示例域列数据必须转换为实际的data.addColumn('date','Date'); 对象,并且您的第一列应定义为

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

或我喜欢的方式

\d

答案 1 :(得分:0)

如果您这样做,则必须使用explorer.actions。在谷歌区域图表

The Google Charts explorer supports three actions

dragToPan:拖动以水平和垂直方式平移图表。 要仅沿水平轴平移,请使用explorer: { axis: 'horizontal' }。对于垂直轴也是如此。

dragToZoom:资源管理器的默认行为是在用户滚动时放大和缩小。如果使用explorer: { actions: ['dragToZoom', 'rightClickToReset'] },则拖动矩形区域会缩放到该区域。每当使用rightClickToReset时,Google建议您使用dragToZoom。见

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

rightClickToReset:右键单击图表会将其恢复为原始的平移和缩放级别

更多详情Google Area Chart Customize