如何使 AmChart 跟随与视频元素同步答案

【问题标题】：How to make AmChart follow synchronize with video element如何使 AmChart 跟随与视频元素同步
【发布时间】：2017-12-01 03:31:05
【问题描述】：

我目前正在处理一个使用https://www.amcharts.com 的项目，并且我正在尝试将<video> 元素的“currentTime”同步到图表的光标。与此示例类似，带有音频：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>

【问题讨论】：

标签： javascript django html amcharts

【解决方案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);

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

Demo

不相关的笔记-

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

【讨论】：