Javascript 自定义工具提示在Google JSAPI中显示错误数据

我正在尝试使用GoogleJSAPI更改鼠标上的自定义工具提示。我也实现了同样的目标。当我将鼠标移到表中的某个项目上时，它会给我错误的数据。但是，如果数据未被过滤，则会正确显示。我的代码有什么问题

function drawTable() {
    var data = new google.visualization.DataTable();

    data.addColumn({
        type: 'string',
        id: 'Position'
    });
    data.addColumn({
        type: 'string',
        id: 'Name'
    });
    data.addColumn({
        type: 'date',
        id: 'Start'
    });
    data.addColumn({
        type: 'date',
        id: 'End'
    });
    data.addColumn({
        'type': 'string',
        'role': 'tooltip',
        'p': {
            'html': true
        }
    });

    data.addRow(['President', "George Washington \rRig Ready", new Date(1789, 3, 29), new Date(1797, 2, 3), "Status: <br> 0"]);
    data.addRow(['President', 'John Adams', new Date(1797, 2, 3), new Date(1801, 2, 3), "Status: <br>some more stuff here1"]);
    data.addRow(['President', 'Thomas Jefferson', new Date(1801, 2, 3), new Date(1809, 2, 3), "Status: <br>some more stuff her2"]);
    data.addRow(['Vice President', 'John Adams', new Date(1789, 3, 20), new Date(1797, 2, 3), "Status: <br>some more stuff h3"]);
    data.addRow(['Vice President', 'Thomas Jefferson', new Date(1797, 2, 3), new Date(1801, 2, 3), "Status: <br>some more stuff her4"]);
    data.addRow(['Vice President', 'Aaron Burr', new Date(1801, 2, 3), new Date(1805, 2, 3), "Status: <br>some more stuff her5"]);
    data.addRow(['Vice President', 'George Clinton', new Date(1805, 2, 3), new Date(1812, 3, 19), "Status: <br>some more stuff here 6"]);
    data.addRow(['Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 21), "Status: <br>some more stuff here 7"]);
    data.addRow(['Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 21), new Date(1793, 11, 30), "Status: <br>some more stuff here 8"]);
    data.addRow(['Secretary of State', 'Edmund Randolph', new Date(1794, 0, 1), new Date(1795, 7, 19), "Status: <br>some more stuff here 9"]);
    data.addRow(['Secretary of State', 'Timothy Pickering', new Date(1795, 7, 19), new Date(1800, 4, 11), "Status: <br>some more stuff here 10"]);
    data.addRow(['Secretary of State', 'Charles Lee', new Date(1800, 4, 12), new Date(1800, 5, 4), "Status: <br>some more stuff here 11"]);
    data.addRow(['Secretary of State', 'John Marshall', new Date(1800, 5, 12), new Date(1801, 2, 3), "Status: <br>some more stuff here 12!"]);
    data.addRow(['Secretary of State', 'Levi Lincoln', new Date(1801, 2, 4), new Date(1801, 4, 0), "Status: <br>some more stuff here 13"]);
    data.addRow(['Secretary of State', 'James Madison', new Date(1801, 4, 1), new Date(1809, 2, 2), "Status: <br>some more stuff here 14"]);
    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));

    var stringFilter = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'string_filter_div',
        options: {
            filterColumnIndex: 1
        }
    });

    var chart = new google.visualization.ChartWrapper({
        options: {
            colors: ['#1F79BD', '#008898', '#009FDF', '#004B97', '#0A6284'],
            timeline: {
                colorByRowLabel: true
            },
            backgroundColor: '#D0ECFF'
        },
        chartType: 'Timeline',
        containerId: 'chart'

    });

    var table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'table_div'

    });

    function myHandler(e) {
        if (e.row != null) {
            $(".google-visualization-tooltip").html(data.getValue(e.row, 4)).css({
                width: "auto",
                height: "auto"
            });
        }
    }

    google.visualization.events.addListener(chart, 'ready', function () {
        var charts = chart.getChart();
        google.visualization.events.addListener(charts, 'onmouseover', myHandler);
    });

    dashboard.bind([stringFilter], [table]);
    dashboard.bind([stringFilter], [chart]);
    dashboard.draw(data);
}

google.load('visualization', '1', {
    packages: ['controls'],
    callback: drawTable
});

函数drawTable（）{
var data=new google.visualization.DataTable（）；
data.addColumn({
键入：“字符串”，
id:'位置'
});
data.addColumn({
键入：“字符串”，
id:'姓名'
});
data.addColumn({
键入：“日期”，
id:“开始”
});
data.addColumn({
键入：“日期”，
id:'结束'
});
data.addColumn({
'类型'：'字符串'，
“角色”：“工具提示”，
“p”：{
“html”：true
}
});
addRow（[‘总统’，“乔治·华盛顿准备好了”，新日期（1789年3月29日），新日期（1797年2月3日），“状态：
0”）；
addRow（[‘总统’、‘约翰·亚当斯’、新日期（1797年2月3日）、新日期（1801年2月3日），“状态：
这里还有一些东西1]”）；
addRow（['President'，'Thomas Jefferson'，新日期（1801,2,3），新日期（1809,2,3），“Status:
还有一些东西她2]）；
addRow（[‘副总统’、‘约翰·亚当斯’、新日期（1789年3月20日）、新日期（1797年2月3日），“状态：
更多信息h3]）；
addRow（[‘副总统’、‘托马斯·杰斐逊’、新日期（1797年2月3日）、新日期（1801年2月3日），“状态：
还有一些东西她4]）；
addRow（[‘副总统’、‘艾伦·伯尔’、新日期（1801年2月3日）、新日期（1805年2月3日），“状态：
还有一些东西她5”]；
addRow（[‘副总统’、‘乔治·克林顿’、新日期（1805年2月3日）、新日期（1812年3月19日），“状态：
这里还有一些东西6”]；
addRow（['Secretary of State'，'John Jay'，新日期（1789,8,25），新日期（1790,2,21），“Status:
这里还有一些东西7”]；
addRow（['Secretary of State'，'Thomas Jefferson'，新日期（1790,2,21），新日期（1793,11,30），“Status:
这里还有一些东西8”]；
addRow（['Secretary of State'，'Edmund Randolph'，new Date（1794,0,1），new Date（1795,7,19），“Status:
这里还有一些东西9”]；
addRow（['Secretary of State'，'Timothy Pickering'，新日期（1795,7,19），新日期（1800,4,11），“Status:
这里还有一些东西10”]；
addRow（['Secretary of State'，'Charles Lee'，新日期（1800,4,12），新日期（1800,5,4），“Status:
这里还有一些东西11”]；
addRow（['Secretary of State'，'John Marshall'，新日期（1800,5,12），新日期（1801,2,3），“Status:
这里还有一些东西12！”）；
addRow（['Secretary of State'，'Levi Lincoln'，新日期（1801,2,4），新日期（1801,4,0），“Status:
这里还有一些东西13”]；
addRow（[‘国务卿’、‘詹姆斯·麦迪逊’、新日期（1801,4,1）、新日期（1809,2,2），“状态：
这里还有一些东西14”]；
var dashboard=new google.visualization.dashboard（document.querySelector（“#dashboard”）；
var stringFilter=new google.visualization.ControlWrapper({
controlType:'StringFilter'，
containerId:'string\u filter\u div'，
选项：{
filterColumnIndex:1
}
});
var chart=new google.visualization.ChartWrapper({
选项：{
颜色：[“1F79BD”、“008898”、“009FDF”、“004B97”、“0A6284”]，
时间线：{
colorByRowLabel：对
},
背景颜色：“#D0ECFF”
},
图表类型：“时间线”，
集装箱船：“海图”
});
var table=new google.visualization.ChartWrapper({
chartType:'表'，
集装箱运输：“表_div”
});
函数myHandler（e）{
如果（e.row！=null）{
$（“.google可视化工具提示”）.html（data.getValue（e.row，4））.css({
宽度：“自动”，
高度：“自动”
});
}
}
google.visualization.events.addListener（图表'ready'，函数（）{
var charts=chart.getChart（）；
google.visualization.events.addListener（图表'onmouseover'，myHandler）；
});
dashboard.bind（[stringFilter]，[table]）；
dashboard.bind（[stringFilter]，[chart]）；
仪表盘.绘图（数据）；
}
load（'visualization'，'1'，'{
包：['controls']，
回调：drawTable
});

下面是我的Fiddler代码：

---

我试过这样做，效果很好。基本上，当我们过滤文本时，表会被更改，但在图表中它仍然引用默认表

我像这样更改了我的处理程序方法，效果非常好

  function myHandler(e){
        if(e.row != null){

            var filteredRows = $(".google-visualization-table-table").find('tbody').find('tr');

            $(".google-visualization-tooltip").html($(filteredRows[e.row +1]).find('td:eq(4)').text()).css({width:"auto",height:"auto"});
        }        
    }

http://jsfiddle.net/Ena84/54/