如何使Amchart遵循与视频元素同步

Question

我当前正在研究一个使用https://www.amcharts.com的项目，我正在尝试将<video>元素的"当前时间"同步到图表的光标。与此示例类似：https：//www.amcharts.com/kbase/sync-chart-cursor-html5-audio/

在上面的示例中，音频以当前音频时间散发当前时间事件，然后在下面的示例中将时间转换为 chart.chartCursor.showCursorAt(time)中的一个格式，一旦当前时间散发，光标将一路走到图的结尾并留在那里。

我该如何使视频的"当前时间"在图表中的相应时间内徘徊？

<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日开始的日期。您需要确保转换匹配。由于您正在使用时刻：

   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);

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

演示

不相关的笔记 -

建议您在MakeChart呼叫中设置诸如dataDateFormat，recalculateToPercents和parseDates之类的设置，而不是在呼叫后而不是在呼叫之后，或者您会遇到正时问题。另请注意，parseDates在库存图中暗示，不需要。