4

我正在尝试自定义悬停时在时间轴图表中显示的工具提示的内容，除了一些图表之外，谷歌似乎不支持自定义工具提示

是否有显示自定义文本的解决方法？

4

3 回答 3

8

这是我在jsfiddle中使用 javascript 和侦听器的解决方法：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Column Chart Example - jsFiddle demo</title>

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body>
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>

    <script type='text/javascript'>//<![CDATA[

        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var container = document.getElementById('chart_div');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();

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

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

            var view = new google.visualization.DataView(dataTable);
            view.setColumns([0,1,2,3]);

            chart.draw(view);

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

            google.visualization.events.addListener(chart, 'onmouseover', myHandler);
        }
        //]]>
    </script>
</body>
</html>
于 2014-10-21T18:32:09.520 回答
2

现在有可能！请参阅： https ://developers.google.com/chart/interactive/docs/gallery/timeline

只需确保在 google.load("visualization", "1.1", {packages:["timeline"]}); 中使用版本“1.1”而不是“1”

于 2015-07-23T20:00:58.830 回答
1

尽管这个问题有点老了，但我将其发布给可能最终在这里寻找答案的其他人：

只要您像这样声明数据表列，html 工具提示就会起作用：

dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

在此处检查更改后的 jsfiddle：

于 2017-07-20T11:05:15.393 回答