google可视化时间轴显示鼠标光标的时间 [英] google visualization timeline show time of mouse cursor

问题描述

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

说：
console.log （googlechart.timedate（mouse.x））;
有什么办法得到我的鼠标x的时间日期？

这是我想为时间轴元素拖动，所以我首先获取鼠标的拖动距离，当光标在某些元素上，现在我得到了像素，我想应用那个时间轴元素的值的变化，拖动已经超过它，但不知道如何知道

< h2_lin>解决方案

不幸的是，没有内置的方法来使用他们的API。根据此问题的答案，我修改了Google的JSFiddle示例，用于 TimeLine 添加一个简单的 mousemove 事件，用于计算游标的相对X和Y位置。

  google.charts.load（'current'，{'package'：['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）]] ; 
 
 
 //创建'ready'事件监听器以向图表添加mousemove事件监听器
 var runOnce = google.visualization.events.addListener（chart，'ready'，function （）{
 google.visualization.events.removeListener（runOnce）; 
 //在图表的容器中创建mousemove事件监听器
 //我使用jQuery，但是你可以使用最好的you 
 $（container）.mousemove（function（e）{
 var xPos = e.pageX  -  container.offsetLeft; 
 var yPos = e.pageY  -  container.offsetTop; 
 
 //（用xPos和yPos做某事）
}）; 
}）; 
 
 chart.draw（dataTable）; 
} 
  

这是JSFiddle。

这只是一个开始。你必须弄清楚如何从鼠标坐标插值时间和日期数据，因为没有API功能，即使有，你也不能在不使用你的自己的计算。您可能在此处找到了一些帮助。

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.

解决方案

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.

这篇关于google可视化时间轴显示鼠标光标的时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！