javascript - 在 Google Chart 中自定义 onmouseover 事件

Question

我正在使用名为 Timeline 的 Google Developer Chart 创建一些图表。我能够成功呈现图表的基本版本，但我想自定义 onmouseover 事件以显示某些 block 信息。不过，我还没有找到任何有关如何自定义此功能的示例。

目前，我的表格代码如下所示:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>

<script language="Javascript" type="text/javascript">

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

    dataTable.addColumn({ type: 'string', id: 'RowLabel' });
    dataTable.addColumn({ type: 'string', id: 'BlockLabel' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
    ["SAT 2B", "Task 1", new Date(2015,01,01), new Date(2015,01,02)],
    ["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
    ["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")],
    ]);

    var formatter = new google.visualization.DateFormat({pattern:'yyyy/DDD-HH:mm:ss'});

    formatter.format(dataTable,2);
    formatter.format(dataTable,3);

    var options = {
        timeline: { colorByRowLabel: true }
      };


    chart.draw(dataTable,options);
  }

    </script>
    <div>
        <h4><p class="text-center">A Timeline</p></h4>
        <div id="timeline" style="width: 95%;"></div>
    </div>

我希望能够在用户将鼠标悬停在时间轴中的给定 block 上时显示 block 标签、开始和结束日期。谁能帮我解决这个问题？时间线代码描述here .

Answer 1

为了自定义 Google Chart 工具提示列 tooltip role是有意的，但似乎时间轴图表不支持它。

以下示例展示了如何在将鼠标悬停在数据元素上时覆盖工具提示内容:

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

    dataTable.addColumn({ type: 'string', id: 'RowLabel' });
    dataTable.addColumn({ type: 'string', id: 'BlockLabel' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
    ["SAT 2B", "Task 1", new Date(2015, 01, 01), new Date(2015, 01, 02)],
    ["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
    ["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")]
    ]);

    var formatter = new google.visualization.DateFormat({ pattern: 'yyyy/DDD-HH:mm:ss' });

    formatter.format(dataTable, 2);
    formatter.format(dataTable, 3);

    var options = {
        timeline: { colorByRowLabel: true }
    };


    chart.draw(dataTable, options);

    google.visualization.events.addListener(chart, 'onmouseover', function(e) {
        setTooltipContent(dataTable,e.row);
    });
}


function setTooltipContent(dataTable,row) {
    if (row != null) {
        var content = '<div class="custom-tooltip" ><h1>' + dataTable.getValue(row, 0) + '</h1><div>' + dataTable.getValue(row, 1) + '</div></div>'; //generate tooltip content
        var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
        tooltip.innerHTML = content;
    }
}

div.google-visualization-tooltip {
    width: auto;
    height:auto;
    background-color: #ccccff;
    color: #000000;
    text-align: center;
    vertical-align: middle;
}

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
 <div>
    <h4><p class="text-center">A Timeline</p></h4>
    <div id="timeline" style="width: 95%;"></div>
 </div>

JSFiddle