Question

我有一个Google Line图表，我正在使用'explorer'选项放大图表。

一旦用户放大折线图，我希望能够获得此选择。

有没有人知道怎么做？

示例图表：一旦放大，我想得到选择。

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
     var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        explorer: { 
                    actions: ['dragToZoom', 'rightClickToReset'],
                    axis: 'horizontal',
                    keepInBounds: true,
                    maxZoomIn: 100
            },
        width: 900,
        height: 500
      };

      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="curve_chart" style="width: 500px; height: 300px"></div>
</body>

</html>

Answer 1

您可以使用以下方法确定图表的可见范围

getChartLayoutInterface - 返回一个对象，其中包含有关图表及其元素的屏幕位置信息。

getChartAreaBoundingBox - 返回包含图表内容的左侧，顶部，宽度和高度的对象。

getHAxisValue - 返回位置的逻辑水平值，它是图表容器左边缘的偏移量。可以是消极的。

getVAxisValue - 返回位置的逻辑垂直值，它是图表容器上边缘的偏移量。可以是消极的。

获得范围后，您可以过滤数据表以查找相关行

请参阅以下工作代码段...

没有“缩放”事件，因此使用MutationObserver来检测缩放...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day');
    data.addColumn('number', 'Guardians of the Galaxy');
    data.addColumn('number', 'The Avengers');
    data.addColumn('number', 'Transformers: Age of Extinction');
    data.addRows([
      [1,  37.8, 80.8, 41.8],
      [2,  30.9, 69.5, 32.4],
      [3,  25.4,   57, 25.7],
      [4,  11.7, 18.8, 10.5],
      [5,  11.9, 17.6, 10.4],
      [6,   8.8, 13.6,  7.7],
      [7,   7.6, 12.3,  9.6],
      [8,  12.3, 29.2, 10.6],
      [9,  16.9, 42.9, 14.8],
      [10, 12.8, 30.9, 11.6],
      [11,  5.3,  7.9,  4.7],
      [12,  6.6,  8.4,  5.2],
      [13,  4.8,  6.3,  3.6],
      [14,  4.2,  6.2,  3.4]
    ]);

    var options = {
      chart: {
        title: 'Box Office Earnings in First Two Weeks of Opening',
        subtitle: 'in millions of dollars (USD)'
      },
      explorer: {
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 100
      },
      pointSize: 6,
      theme: 'maximized',
      width: 900,
      height: 500
    };

    var container = $('#chart_div').get(0);
    var chart = new google.visualization.LineChart(container);

    // detect zoom
    var visibleRange = {};
    var zoomObserver = new MutationObserver(checkZoom);
    zoomObserver.observe(container, {
      childList: true,
      subtree: true
    });

    chart.draw(data, options);

    function checkZoom() {
      var newRange = getChartRange();
      if (JSON.stringify(visibleRange) !== JSON.stringify(newRange)) {
        visibleRange = newRange;
        showRangeValues();
      }
    }

    function getChartRange() {
      var chartLayout = chart.getChartLayoutInterface();
      var chartBounds = chartLayout.getChartAreaBoundingBox();
      return {
        x: {
          min: chartLayout.getHAxisValue(chartBounds.left),
          max: chartLayout.getHAxisValue(chartBounds.left + chartBounds.width)
        },
        y: {
          min: chartLayout.getVAxisValue(chartBounds.top + chartBounds.height),
          max: chartLayout.getVAxisValue(chartBounds.top)
        }
      };
    }

    function showRangeValues() {
      var rangeFilter;
      var rangeKey;
      var rangeRows;
      var rangeTable;
      var rangeView;

      rangeFilter = [];
      $.each(new Array(data.getNumberOfColumns()), function (colIndex) {
        rangeKey = (colIndex === 0) ? 'x' : 'y';
        rangeFilter.push({
          column: colIndex,
          minValue: visibleRange[rangeKey].min,
          maxValue: visibleRange[rangeKey].max
        });
      });

      rangeRows = data.getFilteredRows(rangeFilter);
      rangeView = new google.visualization.DataView(data);
      rangeView.setRows(rangeRows);
      $('#range_div').html(rangeRows.length + ' of ' + data.getNumberOfRows() + ' rows...');

      rangeTable = new google.visualization.Table($('#table_div').get(0));
      rangeTable.draw(rangeView);
    }
  },
  packages:['corechart', 'table']
});

div {
  margin-bottom: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="range_div"></div>
<div id="table_div"></div>

从Google折线图获取资源管理器值

1 个答案: