谷歌可视化时间线显示鼠标光标的时间

Question

我希望我可以 - 在谷歌可视化时间线中 - 在 Java Script 中显示鼠标光标的时间/日期，

像这样说： console.log(googlechart.timedate(mouse.x)); 有什么方法可以获取我的鼠标 x 的时间日期吗？

问题是我正在尝试对时间线元素进行拖动，所以我首先得到了当光标在某个元素上时鼠标被拖动的距离，现在我得到了像素，我想应用这个变化拖过它的那个时间线元素的值，但不知道如何知道要更改的日期/时间的新值是什么，然后我将刷新绘图，

谢谢。

Answer 1

不幸的是，没有内置的方法可以使用他们的 API 来做到这一点。基于this question's answer，我为TimeLine 修改了Google 的JSFiddle 示例，添加了一个简单的mousemove 事件，用于计算光标的相对X 和Y 位置。

  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.

这只是一个开始。您必须弄清楚如何从鼠标坐标中插入时间和日期数据，因为没有 API 功能可以做到这一点——即使有，如果不使用您的自己的计算。你可能会找到一些帮助here。