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

时间:2016-03-28 20:56:17

标签: javascript charts visualization timeline google-chartwrapper

我希望我可以-in谷歌可视化时间轴 - 在Java脚本中显示鼠标光标的时间/日期,

说: 的console.log(googlechart.timedate(mouse.x)); 有没有办法得到我的鼠标x的时间日期?

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

感谢。

1 个答案:

答案 0 :(得分:0)

不幸的是,使用他们的API没有内置的方法来做到这一点。基于https://github.com/facebook/react-native/pull/4438#issuecomment-163533312,我修改了Google的this question's answer JSFiddle示例,以添加一个简单的 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); } 事件来计算游标的相对X和Y位置。

C:\nppdf32Log\debuglog.txt

TimeLine

这只是一个开始。您必须弄清楚如何从鼠标坐标中插入时间和日期数据,因为没有用于执行此操作的API功能 - 即使存在,您也无法获得"介于"之间值而不使用您自己的计算。您可能会找到一些帮助Here's the JSFiddle.