创建一个带有与电影同步的标记的javascript图

Creating an javascript graph with marker that is synchronize with a movie

本文关键字：同步 电影 javascript 一个 创建      更新时间：2023-09-26

我正在尝试创建一个用于脑电信号分析的在线网络工具。该工具假设显示eeg信号的图形，与显示给受试者的电影同步。

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

可以在这里找到一个做类似事情的好工具的链接：

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

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

为了澄清，我需要画一条垂直线作为标记。

我很痛苦。请帮助：）

多亏了Danvk，我才知道如何做到这一点。下面是展示这种解决方案的jsfiddler链接。

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

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

还有一些改进可以做。

  1. 目前，如果用户放大了图形，然后单击它，缩放将被重置
  2. 不支持你看电影我希望很快我能发布一个更完整的解决方案，也能让用户从他们的电脑上传图形数据和视频

 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);
 }
相关文章：