google visualization timeline show time of mouse cursor

问题

I hope that I can -in google visualization timeline- show time/date of mouse cursor in Java Script,

Say like : console.log(googlechart.timedate(mouse.x)); is there any way to get the time date of my mouse x?

the thing is that I am trying to do dragging for the timeline elements, so I first get the distance of the mouse got dragged when the cursor was on some element, now I got the pixels and I want to apply that changing in value of that timeline element that the dragging was over it,but can't know how to know what is the new value of date/time to change to, then I will refresh the drawing,

thanks.

回答1:

Unfortunately there's no built-in way to do this using their API. Based on this question's answer, I modified Google's JSFiddle example for TimeLine to add a simple mousemove event that calculates the relative X and Y positions of the cursor.

  google.charts.load('current', {'packages':['timeline']});
  google.charts.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: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);


    // create 'ready' event listener to add mousemove event listener to the chart
    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
          google.visualization.events.removeListener(runOnce);
          // create mousemove event listener in the chart's container
          // I use jQuery, but you can use whatever works best for you
          $(container).mousemove(function (e) {
            var xPos = e.pageX - container.offsetLeft;
            var yPos = e.pageY - container.offsetTop;

            // (Do something with xPos and yPos.)
        });
    });

    chart.draw(dataTable);
  }

Here's the JSFiddle.

That's only a start. You'll have to figure out how to interpolate time and date data from the mouse coordinates, because there's no API functionality for doing that—and even if there were, you wouldn't be able to get "in between" values without using your own calculations. You might find some help here.

来源：https://stackoverflow.com/questions/36271023/google-visualization-timeline-show-time-of-mouse-cursor