简体   繁体   中英

How to enable “selected” tooltip on Google Timelines?

I've created a timeline using the Google Charts API.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var today = new Date();
    var datenow= today.getFullYear()+','+(today.getMonth()+1)+','+today.getDate();
    var container = document.getElementById('example3.1');
    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.addRows([
      [ 'Arrgh\'s Era', 'Arrgh\'s Era', new Date(2014, 11, 19), new Date(datenow)],
      [ 'Grand Admiral', 'Ogaden', new Date(2014, 11, 19), new Date(2015, 4, 18) ],
      [ 'Grand Admiral', 'Warpool', new Date(2015, 4, 19), new Date(2015, 5, 18) ],
      [ 'Grand Admiral', 'Ogaden', new Date(2015, 5, 19), new Date(2015, 11, 18) ],
      [ 'Grand Admiral', 'Jacob Hanson', new Date(2015, 11, 19), new Date(2016, 3, 18)],
      [ 'Grand Admiral', 'Ogaden', new Date(2016, 3, 19), new Date(2016, 10, 18)],
      [ 'Grand Admiral', 'DragonK', new Date(2016, 10, 19), new Date(2017, 3, 18)],
      [ 'Grand Admiral', 'Bluebear', new Date(2017, 3, 19), new Date(2017, 9, 18)],
      [ 'Grand Admiral', 'Ripper', new Date(2017, 9, 19), new Date(datenow)],
    ]);

    chart.draw(dataTable);
  }
</script>


  </head>
  <body>
    <div id="example3.1" style="height: 200px;"></div>
  </body>
</html>

The resulting Timeline

What I want to achieve is that the tooltip should be seen on only when the bars are selected (Not hovered). I tried using tooltip: { trigger: 'selection' } in the chart options . It would result in a blank page.

What am I doing wrong? I've seen other ways on Google Chart API pages but they seem to work for other Chart types, not Timelines.

the timeline chart only can set value of trigger as 'focus' or none, the default value is 'focus' and it only can be hover. Another issue is the tooltip of the timeline chart are not persistent

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM