0

我正在尝试使用 Google JSAPI 更改鼠标悬停的自定义工具提示。我能够做到这一点。当我将鼠标悬停在表格中的某个项目上时，它给了我错误的数据。但是，当未过滤数据时，它会正确显示。我的代码有什么问题？

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
});

下面是我的提琴手代码：

http://jsfiddle.net/Ena84/51/

截图

4

1 回答 1

0

我试过这样，它就像魅力一样。基本上，当我们过滤文本时，表格会发生变化，但在图表中它仍然引用默认表格。

我像这样更改了我的 Handler 方法，它的工作原理很棒

  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/
于 2015-02-18T12:58:10.903 回答