私はGoogleの折れ線グラフに問題があります。私のシステムはデータをインタラクティブに配信していますので、私は変更時に対話的にGoogleグラフを更新する必要があります。そのためには、データのアップロードごとにchart.draw(...)に電話します。残念なことに、このような呼び出しを行うと、コンポーネントの視覚的な状態がリセットされます。Google chart loose zoom chart.draw（）の呼び出し後にズーム
は、コンポーネントをズームした場合、第2にリセットされます、次のjsfiddle http://jsfiddle.net/1besonf5/83/
を考えてみましょう。原因：
setInterval(() => chart.draw(data, chartOptions), 3000);
どのようにこの問題を解決しますか？
は同じズームレベルでチャートを再描画する方法の概略例である以下
それは、様々な図を用いて各軸
の現在の最小/最大値を見つけることに帰着します...
getChartLayoutInterface- グラフとその要素の画面上の配置に関する情報を含むオブジェクトを返します。
getChartAreaBoundingBox- チャートコンテンツの左上、上端、幅、高さを含むオブジェクトを返します。
getHAxisValue- 位置の論理水平値を返します。これは、チャートコンテナの左端からのオフセットです。ネガティブにすることができます。
getVAxisValue- 位置の論理垂直値を返します。これは、チャートコンテナの上端からのオフセットです。ネガティブにすることができます。
あなたは座標を持っていたら、あなたは
2.参照（下記setRangeを参照）軸オプションに最小/最大値を設定することができ
（以下getCoordsを参照してください） ...
「再描画」ボタンは、現在表示されているグラフと同じズームレベルでグラフを再描画することを示します。
テストする、「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>