调用 chart.draw() 后，谷歌图表失去缩放 [英] Google chart looses zoom after call to chart.draw()

问题描述

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

考虑下面的jsfiddle http://jsfiddle.net/1besonf5/83/>

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

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

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

解决方案

下面是一个粗略的例子，说明如何在相同的缩放级别重新绘制图表

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

<块引用>

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

getChartAreaBoundingBox -- 返回一个包含图表内容左、上、宽、高的对象.

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

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

(见下面的getCoords)

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

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

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

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

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

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

google.charts.load('current', {回调:函数(){var 数据 = 新的 google.visualization.DataTable({列":[{"label": "X", "type": "number"},{"label": "Y", "type": "number"}],行":[{"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}]}]});变量选项 = {探险家:{动作:['dragToZoom'，'rightClickToReset']，轴:'水平'，keepInBounds: 真},h轴:{标题:'X'},点大小:3，v轴:{标题:'Y'}};var chartDiv = document.getElementById('chart_div');var chart = new google.visualization.LineChart(chartDiv);document.getElementById('reset-chart').addEventListener('click', function () {设置范围()；}， 错误的);document.getElementById('update-chart').addEventListener('click', function () {setRange(getCoords());}， 错误的);函数 getCoords() {var chartLayout = chart.getChartLayoutInterface();var chartBounds = chartLayout.getChartAreaBoundingBox();返回 {X: {分钟:chartLayout.getHAxisValue(chartBounds.left)，最大值:chartLayout.getHAxisValue(chartBounds.width + chartBounds.left)},y:{分钟:chartLayout.getVAxisValue(chartBounds.top)，最大值:chartLayout.getVAxisValue(chartBounds.height + chartBounds.top)}};}函数 setRange(coords) {options.hAxis.viewWindow = {};options.vAxis.viewWindow = {};如果(坐标){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;}图表绘制(数据，选项)；}图表绘制(数据，选项)；},包:['corechart']});

<script src="https://www.gstatic.com/charts/loader.js"></script><input id="update-chart" type="button" value="重绘图表"/><input id="reset-chart" type="button" value="重置图表"/><div id="chart_div"></div>

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() 后，谷歌图表失去缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！