在调用chart.draw（）之后，Google图表放大缩小 [英] Google chart looses zoom after call to chart.draw()

问题描述

我有一个谷歌折线图问题，我的系统交互式地提供数据，我需要更改后交互更新谷歌图表。为了做到这一点，我在每次数据上传过程中都会调用 chart.draw（...）。不幸的是，这样的调用会重置组件的可视状态。

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

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

  setInterval（（）=> chart.draw（data，chartOptions），3000）; 
  

您如何处理这个问题？

解决方案

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

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

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

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

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

getVAxisValue - 返回位置处的逻辑垂直值，它是距离图表容器顶边的偏移量。可以是负面的。

（请参阅下面的 getCoords ）

获得坐标后，您可以在轴选项 -
上设置最小值/最大值（参见下面的 setRange ）

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

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

来测试， dragToZoom 图表，然后点击重绘图表

重置图表按钮用于将图表重置为原始缩放级别

- 这通常是右键单击，但由于重画而丢失，并且可能会添加回事件监听器。

也可能需要舍入轴值或提供自定义滴答，这里没有提供

I have a problem with google line chart, my system delivers data interactively and I need to update google chart interactively upon change. In order to do so, I call chart.draw(...) during every data upload. Unfortunately making such call resets visual state of the component.

Consider the following jsfiddle http://jsfiddle.net/1besonf5/83/

If you zoom component it will get reset in a second. Due to

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

How do you deal with this problem?

解决方案

following is a rough example of how to re-draw the chart at the same zoom level

1. it boils down to finding the current min / max values of each axis
using the various chart methods available, including...

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.

(see getCoords below)

once you have the coordinates, you can set the min / max values on the axis options
(see setRange below)

2. see the following working snippet...

the "Redraw Chart" button demonstrates redrawing the chart with the same zoom level as found in the currently displayed chart

to test, "dragToZoom" the chart, then click "Redraw Chart"

the "Reset Chart" button is used to reset the chart to the original zoom level
-- which is normally right-click but is lost due to redraw and could be added back with an event listener

might also want to round the axis values or provide custom ticks, which isn't provided here

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>

这篇关于在调用chart.draw（）之后，Google图表放大缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！