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

google visualization timeline show time of mouse cursor

本文关键字：光标 时间 鼠标 显示 可视化 时间线 谷歌      更新时间：2023-09-26

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

像这样说：console.log（googlechart.timedate（mouse.x））；有什么方法可以得到我的鼠标x的时间日期吗？

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

谢谢。

遗憾的是，使用他们的API没有内置的方法来实现这一点。基于这个问题的答案，我修改了谷歌的JSFiddle 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);
  }

这是JSFiddle。

这只是一个开始。你必须弄清楚如何从鼠标坐标中插入时间和日期数据，因为没有API功能可以这样做，即使有，如果不使用自己的计算，你也无法获得"介于两者之间"的值。你可能会在这里找到一些帮助。

相关文章：