如何让AmChart跟随视频元素同步

Question

我目前正在从事一个使用 https://www.amcharts.com and I am trying to synchronize a <video> element's "currentTime" to the chart's cursor. Similar to this example with audio: https://www.amcharts.com/kbase/sync-chart-cursor-html5-audio/

的项目

在上面的示例中，音频发出带有当前音频时间的 currentTime 事件，然后将时间转换为 chart.chartCursor.showCursorAt(time) 中参数的格式在我下面的示例中，一旦 currentTime 发出，光标一直到图表的末尾并停留在那里。

如何才能让视频的 "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>

Answer 1

showCursorAt 需要转换后的类别值，因为您使用的是字符串时间戳。 AmCharts 将字符串转换为 JavaScript Date 对象，因此您需要 Date 对象而不是字符串格式（注意音频演示也使用 Date 对象）

除此之外，AmCharts 将纯时间日期 (JJ:NN:SS) 转换为从 1900 年 1 月 1 日开始的日期。您需要确保转换匹配。由于您正在使用 moment:

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

你也可以使用AmCharts.stringToDate:

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

您还需要在 categoryAxisSettings 中将 equalSpacing 设置为 true 以防止光标抖动。

Demo

不相关的笔记-

建议您在 makeChart 调用中设置 dataDateFormat、recalculateToPercents 和 parseDates 之类的设置，而不是在调用之后立即设置，否则您会运行时间问题。另请注意，parseDates 隐含在股票图表中，不是必需的。

如何让AmChart跟随视频元素同步

How to make AmChart follow synchronize with video element

html

javascript

django

amcharts