Получение значений проводника из графика Google

Question

Получение значений проводника из графика Google

1

У меня есть диаграмма 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>

Jan 29 июнь 2017, в 13:45

Источник

Теги:

javascript

linechart

google-visualization

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2017-06-29T11-35-00.000Z

вы можете использовать следующие методы для определения видимого диапазона диаграммы

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>