调用chart.draw（）后，Google图表失去缩放

Question

我的Google折线图有问题，我的系统以交互方式提供数据，我需要在更改时以交互方式更新Google图表。为了做到这一点，我chart.draw(...)在每次数据上传期间都打电话给我。不幸的是，进行这样的调用会重置组件的视觉状态。

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

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

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

您如何处理这个问题？

Answer 1

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

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

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

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

getHAxisValue-返回位置的逻辑水平值，该值是相对于图表容器左边缘的偏移量。可以为负。

getVAxisValue-返回位置处的逻辑垂直值，该值是相对于图表容器顶部边缘的偏移量。可以为负。

（见getCoords下文）

一旦有了坐标，就可以在轴选项上设置最小值/最大值
（请参见setRange下文）

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

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

测试dragToZoom图表，然后单击“重新绘制图表”

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

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

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>