3

私は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>
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 に答える