Question

我目前正在开发一个使用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>

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

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

Demo

无关的说明 -

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

如何让AmChart跟随视频元素

1 个答案: