Question

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

目前，我的表格代码如下：

<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>

当用户将鼠标悬停在时间轴中的给定块上时，我希望能够显示BlockLabel，Start和End日期。任何人都可以帮我解决这个问题吗？时间轴代码描述为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

在Google Chart中自定义onmouseover事件

1 个答案: