本文详解 google timeline 图表配合 chartrangefilter 使用时,因视图缩放导致 `getselection().row` 返回的是过滤后视图的局部行号而非原始数据表索引的问题,并提供通过 `chartwrapper.getdatatable()` 获取一致、准确数据值的标准解决方案。
在使用 Google Charts 的 Timeline 图表(google.visualization.Timeline)搭配 ChartRangeFilter 实现交互式时间范围筛选时,一个常见且易被忽视的问题是:图表缩放/过滤后触发的 select 事件所返回的 row 值,并非原始数据表(DataTable)中的全局索引,而是当前渲染视图(即经 ChartRangeFilter 处理后的子集)中的局部行号。例如,原始数据表第 15 行被缩放后显示为视图中的第 0 行,此时 getSelection()[0].row 将返回 0,若直接用该值去查原始 dataTable,将取到错误的数据项。
✅ 正确做法是:始终使用图表包装器(chartWrapper)所维护的、与当前视图状态同步的数据表,即调用 chartWrapper.getDataTable() 而非原始声明的 dataTable 变量。
以下是关键代码对比与推荐实现: