Javascript Google chart在调用chart.draw（）后松开缩放

我有一个谷歌折线图的问题，我的系统以交互方式提供数据，我需要在更改后以交互方式更新谷歌图表。为此，我在每次数据上传期间调用

chart.draw（…）

。不幸的是，进行这样的调用会重置组件的可视状态

考虑以下JSFIDLE

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

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

---

如何处理此问题？

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

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

getChartLayoutInterface

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

getChartAreaBoundingBox

——返回包含图表内容的左侧、顶部、宽度和高度的对象

getHAxisValue

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

getVAxisValue

-返回位置处的逻辑垂直值，该位置是距图表容器上边缘的偏移量。可能是负面的

（请参见下面的

getCoords

）

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

setRange

）

2.请参阅以下工作片段

“重画图表”按钮演示使用与当前显示图表中相同的缩放级别重画图表

要测试图表，“

dragToZoom

”，请单击“重新绘制图表”

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

可能还希望对轴值进行四舍五入或提供自定义记号，此处未提供

google.charts.load（'current'{
回调：函数（）{
var data=new google.visualization.DataTable({
“科尔斯”：[
{“标签”：“X”，“类型”：“编号”}，
{“标签”：“Y”，“类型”：“编号”}
],
“行”：[
{“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：对
},
哈克斯：{
标题：“X”
},
点数：3，
言辞：{
标题：“Y”
}
};
var chartDiv=document.getElementById（'chart_div'）；
var chart=新的google.visualization.LineChart（chartDiv）；
document.getElementById（'reset-chart'）。addEventListener（'click'，function（）{
setRange（）；
}，假）；
document.getElementById（'update-chart'）。addEventListener（'click'，function（）{
setRange（getCoords（））；
}，假）；
函数getCoords（）{
var chartLayout=chart.getChartLayoutInterface（）；
var chartBounds=chartLayout.getChartAreaBoundingBox（）；
返回{
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）
}
};
}
函数设置范围（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']
});

重画图表按钮后，右键单击“重置”不起作用。我试图找到一个解决方案。这是因为图表已经被重新绘制，以及重置图表按钮的原因。您可以将重置按钮事件改为右键单击事件。。。