Javascript 如何使AmChart follow与视频元素同步

我目前正在处理一个使用的项目，我正在尝试将

元素的“currentTime”与图表的光标同步。与此音频示例类似：

在上面的示例中，音频使用当前音频时间发出currentTime事件，然后将时间转换为

chart.chartCursor.showCursorAt（time）

中的参数格式。在下面的示例中，一旦currentTime发出，光标将一直移动到图形的末尾并停留在那里

如何使视频的“当前时间”悬停在图表中相应的时间上

<script>
$(document).ready(function(){
  var chart = AmCharts.makeChart( "chartdiv", {

    "type": "stock",
    "theme": "light",

    "categoryAxesSettings": {
      "minPeriod": "ss", // set minimum to milliseconds
      "groupToPeriods": [ 'ss' ] // specify period grouping
    },

    "dataSets": [ 
    {% for l, c in labels %}
      {
        "title": "{{ l|safe }}",
        "color": "{{ c }}",
        "fieldMappings": [ {
          "fromField": "prominence",
          "toField": "prominence"
        } ],
        "dataLoader": {
          "url": "/data/csv/calc/{{ l|quote }}.csv",
          "format": "csv",
          "delimiter": ",",
          "useColumnNames": true,
          "skip": 1
        },
        "categoryField": "time"
      }{% if not loop.last %},{% endif %}
    {% endfor %}
    ],

    "panels": [ {
        "title": "Prominence",
        "percentHeight": 70,

        "stockGraphs": [ {
          "id": "g1",
          "valueField": "prominence",
          "lineThickness": 2,
          "bullet": "round",
          "comparable": true,
          "compareField": "prominence",
          "balloonText": "[[title]]:<b>[[prominence]]</b>",
          "compareGraphBalloonText": "[[title]]:<b>[[prominence]]</b>"
        } ],

        "stockLegend": {
          "periodValueTextRegular": "[[prominence.close]]",
          "periodValueTextComparing": "[[prominence.close]]"
        }
      }
    ],
    "chartCursorSettings": {
      "valueBalloonsEnabled": true,
      "categoryBalloonDateFormats": [ {
        "period": "ss",
        "format": "JJ:NN:SS"
      } ]
    },

    "dataSetSelector": {
      "position": "left"
    }
    ,

    "panelsSettings": {
      "usePrefixes": true
    }
  });

  chart.parseDates = true;
  chart.dataDateFormat = "JJ:NN:SS";
  chart.panelsSettings.recalculateToPercents = "never";

  $("#video").on(
    "timeupdate", 
    function(event){
    var dur = moment.duration(this.currentTime,"seconds").format("hh:mm:ss",{ trim: false })
            console.log(dur);
    chart.chartCursors[0].showCursorAt(dur)
  });
});
</script>

$（文档）.ready（函数（）{
var chart=AmCharts.makeChart（“chartdiv”{
“类型”：“库存”，
“主题”：“光”，
“类别设置”：{
“minPeriod”：“ss”，//将最小值设置为毫秒
“groupToPeriods”：['ss']//指定时段分组
},
“数据集”：[
{标签%中的l，c的百分比}
{
“标题：“{l|safe}}”，
“颜色”：“{c}}”，
“字段映射”：[{
“fromField”：“突出”，
“托菲尔德”：“突出”
} ],
“数据加载器”：{
“url”：“/data/csv/calc/{{l|quote}}.csv”，
“格式”：“csv”，
“分隔符”：“，”，
“useColumnNames”：正确，
“跳过”：1
},
“类别字段”：“时间”
}{%if-not loop.last%}，{%endif%}
{%endfor%}
],
“专家组”：[{
“标题”：“突出”，
“百分高度”：70，
“股票图表”：[{
“id”：“g1”，
“价值场”：“突出度”，
“线宽”：2，
“子弹”：“圆形”，
“可比”：正确，
“比较场”：“突出”，
“文本”：“[[标题]]：[[显著性]]”，
“CompareGraphBallodText:”[[标题]]：[[显著性]]
} ],
“股票传奇”：{
“periodValueTextRegular”：“[[突出.关闭]]”，
“periodValueTextComparing:”[[Progression.close]]
}
}
],
“图表光标设置”：{
“ValueBallodesEnabled”：正确，
“categoryBalloonDateFormats”：[{
“期间”：“ss”，
“格式”：“JJ:NN:SS”
} ]
},
“数据集选择器”：{
“位置”：“左”
}
,
“面板设置”：{
“使用前缀”：true
}
});
chart.parseDates=true；
chart.dataDateFormat=“JJ:NN:SS”；
chart.panelsSettings.recreactoPercents=“从不”；
$（“#视频”）。在(
“时间更新”，
功能（事件）{
var dur=moment.duration（this.currentTime，“seconds”）.format（“hh:mm:ss”，{trim:false}）
控制台日志（dur）；
chart.chartCursors[0]。showCursorAt（dur）
});
});

showCursorAt

需要转换的类别值，因为您使用的是字符串时间戳。AmCharts将字符串转换为JavaScript

Date

对象，因此您需要

Date

对象而不是字符串格式（注意音频演示也使用

Date

对象）

除此之外，AmCharts还将仅限时间的日期（

JJ:NN:SS

）转换为1900年1月1日起的日期。您需要确保您的转换匹配。由于您使用的是矩：

   var newTime = moment(
     moment
       .duration(this.currentTime, "seconds")
       .format("1900-01-01 hh:mm:ss", { trim: false })
   ).toDate();
   chart.chartCursors[0].showCursorAt(newTime);

您还可以使用：

您还需要在

类别设置中设置为true，以防止光标抖动


无关音符-

建议您在makeChart调用内而不是在调用后立即设置设置，如
dataDateFormat
、
RecreacteToPercents
和
parseDates
，否则会遇到计时问题。还要注意，
parseDates
在股票图表中是隐含的，不是必需的

  var newTime = AmCharts.stringToDate(
    moment
      .duration(this.currentTime, "seconds")
      .format("hh:mm:ss", { trim: false }),
    "JJ:NN:SS"
  );
  chart.chartCursors[0].showCursorAt(newTime);