javascript - 谷歌图表在调用 chart.draw() 后失去缩放

Question

我的 google 折线图有问题，我的系统以交互方式提供数据，我需要在更改时以交互方式更新 google 图表。为此，我在每次数据上传期间调用 chart.draw(...)。不幸的是，进行此类调用会重置组件的视觉状态。

考虑以下 jsfiddle http://jsfiddle.net/1besonf5/83/

如果缩放组件，它会在一秒钟内重置。由于

setInterval(() => chart.draw(data, chartOptions), 3000);

你是如何处理这个问题的？

Answer 1

以下是如何在相同缩放级别重新绘制图表的粗略示例

1.归结为找到每个轴的当前最小/最大值
使用各种可用的图表方法，包括...

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.

(参见下面的 getCoords)

一旦有了坐标，就可以在轴选项上设置最小值/最大值
(参见下面的 setRange)

2. 查看以下工作片段...

“重绘图表”按钮演示了使用与当前显示的图表中相同的缩放级别重绘图表

要测试，“dragToZoom”图表，然后单击“Redraw Chart”

“重置图表”按钮用于将图表重置为原始缩放级别
-- 通常是右键单击，但由于重绘而丢失，可以通过事件监听器添加回来

可能还想舍入轴值或提供自定义刻度，此处未提供

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"label": "X", "type": "number"},
        {"label": "Y", "type": "number"}
      ],
      "rows": [
        {"c": [{"v": 0}, {"v": 0}]},
        {"c": [{"v": 1}, {"v": 1}]},
        {"c": [{"v": 2}, {"v": 2}]},
        {"c": [{"v": 3}, {"v": 4}]},
        {"c": [{"v": 4}, {"v": 8}]},
        {"c": [{"v": 5}, {"v": 16}]},
        {"c": [{"v": 6}, {"v": 32}]},
        {"c": [{"v": 7}, {"v": 64}]},
        {"c": [{"v": 8}, {"v": 128}]},
        {"c": [{"v": 9}, {"v": 256}]}
      ]
    });

    var options = {
      explorer: {
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true
      },
      hAxis: {
        title: 'X'
      },
      pointSize: 3,
      vAxis: {
        title: 'Y'
      }
    };

    var chartDiv = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(chartDiv);

    document.getElementById('reset-chart').addEventListener('click', function () {
      setRange();
    }, false);

    document.getElementById('update-chart').addEventListener('click', function () {
      setRange(getCoords());
    }, false);

    function getCoords() {
      var chartLayout = chart.getChartLayoutInterface();
      var chartBounds = chartLayout.getChartAreaBoundingBox();
      return {
        x: {
          min: chartLayout.getHAxisValue(chartBounds.left),
          max: chartLayout.getHAxisValue(chartBounds.width + chartBounds.left)
        },
        y: {
          min: chartLayout.getVAxisValue(chartBounds.top),
          max: chartLayout.getVAxisValue(chartBounds.height + chartBounds.top)
        }
      };
    }

    function setRange(coords) {
      options.hAxis.viewWindow = {};
      options.vAxis.viewWindow = {};
      if (coords) {
        options.hAxis.viewWindow.min = coords.x.min;
        options.hAxis.viewWindow.max = coords.x.max;
        options.vAxis.viewWindow.min = coords.y.min;
        options.vAxis.viewWindow.max = coords.y.max;
      }
      chart.draw(data, options);
    }
    chart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="update-chart" type="button" value="Redraw Chart" />
<input id="reset-chart" type="button" value="Reset Chart" />
<div id="chart_div"></div>