javascript - 创建带有与电影同步的标记的 JavaScript 图表

Question

我正在尝试创建一个用于脑电信号分析的在线网络工具。该工具应该显示与向受试者播放的电影同步的脑电图信号图。

我已经在 csharp 上成功实现了它，但我找不到一种方法可以使用我看到的任何已知的 javascript 图表轻松实现它。

可以在这里找到执行类似操作的好工具的链接:

http://www.mesta-automation.com/real-time-line-charts-with-wpf-and-dynamic-data-display/

我尝试过使用 dygraph 和谷歌图表。我知道在服务器上创建一个后台线程来每 50 毫秒检查一次电影状态应该相对容易。我无法做的是在图表本身上动态创建电影位置的标记。我能够在图上绘图，但无法更改标记位置。

为了澄清起见，我需要绘制一条垂直线作为标记。

我正承受着巨大的痛苦。请帮忙:)

Answer 1

感谢 Danvk，我知道了该怎么做。 下面是演示此类解决方案的 jsfiddler 链接。

http://jsfiddle.net/ng9vy8mb/10/embedded/result/

下面是执行该任务的 JavaScript 代码。它与视频同步更改标记的位置。

还有一些可以改进的地方。

1. 目前，如果用户放大图表然后点击它，缩放将会重置。
2. 不支持 YouTube 电影 我希望很快我就能发布一个更完整的解决方案，该解决方案还允许用户从计算机上传图形数据和视频

;

 var dc;
 var g;
 var v;

 var my_graph;

 var my_area;

 var current_time = 0;
//when the document is done loading, intialie the video events listeners
 $(document).ready(function () {
     v = document.getElementsByTagName('video')[0];
     v.onseeking = function () {
             current_time = v.currentTime * 1000;
             draw_marker();
         };

     v.oncanplay = function () {
         CreateGraph();             
         };

     v.addEventListener('timeupdate', function (event) {
         var t = document.getElementById('time');
         t.innerHTML = v.currentTime;
         g.updateOptions({
             isZoomedIgnoreProgrammaticZoom: true
         });

         current_time = v.currentTime * 1000;
     }, false);         
 });

 function change_movie_position(e, x, points) {
     v.currentTime = x / 1000;
 }

 function draw_marker() {
     dc.fillStyle = "rgba(255, 0, 0, 0.5)";
     var left = my_graph.toDomCoords(current_time, 0)[0] - 2;
     var right = my_graph.toDomCoords(current_time + 2, 0)[0] + 2;
     dc.fillRect(left, my_area.y, right - left, my_area.h);
 };


//data creation
 function CreateGraph() {
     number_of_samples = v.duration * 1000;
     // A basic sinusoidal data series.
     var data = [];
     for (var i = 0; i < number_of_samples; i++) {
         var base = 10 * Math.sin(i / 90.0);
         data.push([i, base, base + Math.sin(i / 2.0)]);
     }

     // Shift one portion out of line.
     var highlight_start = 450;
     var highlight_end = 500;
     for (var i = highlight_start; i <= highlight_end; i++) {
         data[i][2] += 5.0;
     }

     g = new Dygraph(
     document.getElementById("div_g"),
     data, {
         labels: ['X', 'Est.', 'Actual'],
         animatedZooms: true,
         underlayCallback: function (canvas, area, g) {
             dc = canvas;
             my_area = area;
             my_graph = g;
             bottom_left = g.toDomCoords(0, 0);
             top_right = g.toDomCoords(highlight_end, +20);
             draw_marker();
         }
     });

     g.updateOptions({
         clickCallback: change_movie_position
     }, true);

 }