Question

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

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

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

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

你如何处理这个问题？

Answer 1

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

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

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

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

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

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

（见下面的getCoords）

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

2。请参阅以下工作代码段

＆＃34;重绘图表＆＃34;按钮演示使用与当前显示的图表中相同的缩放级别重新绘制图表

进行测试，＆＃34; dragToZoom＆＃34;图表，然后点击＆＃34;重绘图表＆＃34;

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

可能还想围绕轴值或提供自定义刻度，这里没有提供

＆＃13;

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']
});

＆＃13;

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

＆＃13;

谷歌图表在调用chart.draw（）后失去缩放

1 个答案: