个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 15:30:33 24 4
gpt4 key购买 nike

我有一个 Google 折线图，我正在使用“资源管理器”选项来放大图表。

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

有人知道怎么做吗？

示例图表:放大后我想获得选择。

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

最佳答案

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

getChartLayoutInterface -- Returns an object containing information about the onscreen placement of the chart and its elements.

getChartAreaBoundingBox -- Returns an object containing the left, top, width, and height of the chart content.

getHAxisValue - Returns the logical horizontal value at position, which is an offset from the chart container's left edge. Can be negative.

getVAxisValue - Returns the logical vertical value at position, which is an offset from the chart container's top edge. Can be negative.

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

请参阅以下工作片段...

没有“缩放”事件，因此使用 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>

关于javascript - 从 Google 折线图中获取资源管理器值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44824131/

24 4 0
文章推荐： javascript - 导入脚本顺序错误，函数未定义
文章推荐： c++ - 迭代 vector 和其他 STL 容器的样式之间的区别
文章推荐： c++ - 使用参数包参数初始化 `std::array`
文章推荐： javascript - 如何在 Meteor 应用程序中包含原始 JavaScript 代码
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com