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

Question

我希望我可以在 google 可视化时间轴中 - 在 Java 脚本中显示 time/date 鼠标光标，

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

问题是我正在尝试为时间轴元素做拖动，所以我首先得到当光标在某个元素上时鼠标被拖动的距离，现在我得到了像素并且我想应用它拖拽过的那个时间轴元素的值发生变化，但不知道如何知道 date/time 的新值是什么要更改，然后我将刷新绘图，

谢谢。

Answer 1

不幸的是，没有内置的方法可以使用他们的 API 来做到这一点。在this question's answer, I modified Google's JSFiddle example for TimeLine的基础上添加一个简单的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 功能可以做到这一点——即使有，您也无法获得 "in between" 值而不使用您自己的计算。您可能会找到一些帮助 here.

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

google visualization timeline show time of mouse cursor

javascript

charts

timeline

visualization

google-visualization