3

我正在研究谷歌可视化图表。我希望当我选择图表的特定区域时，我可以缩放该特定选定区域。我也希望它对折线图、条形图、饼图做同样的事情

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

2 回答 2

1

据我所知，通过配置选项，您应该能够使用一个名为explorer

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

请查看折线图 APIexplorer中的 和其他选项并阅读注释

注意：资源管理器仅适用于连续轴（例如数字或日期）。

因此，您的示例域列数据必须转换为实际Date对象，并且您的第一列应定义为

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

或者我喜欢的方式

data.addColumn({role:'domain', type:'date', label:'Date'});
于 2016-04-10T17:15:31.120 回答
0

如果你这样做，你必须使用explorer.actions. 在谷歌面积图中

The Google Charts explorer supports three actions

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

dragToZoom:浏览器的默认行为是在用户滚动时放大和缩小。如果explorer: { actions: ['dragToZoom', 'rightClickToReset'] }使用，则在矩形区域上拖动会放大该区域。Google 建议使用rightClickToReset时dragToZoom使用。看

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

rightClickToReset:右键单击图表将其返回到原始平移和缩放级别

更多细节谷歌面积图自定义

于 2017-05-30T07:10:59.173 回答