Comment faire en sorte qu'AmChart suive la synchronisation avec l'élément vidéo

Question

Je travaille actuellement sur un projet qui utilise https://www.amcharts.com et j'essaie de synchroniser la propriété "currentTime" d'un élément avec le curseur du graphique. Similaire à cet exemple avec l'audio : https://www.amcharts.com/kbase/sync-chart-cursor-html5-audio/

Dans l'exemple ci-dessus, l'audio émet l'événement currentTime avec l'heure audio actuelle, puis convertit l'heure en un format donné en argument dans chart.chartCursor.showCursorAt(time). Dans mon exemple ci-dessous, une fois que currentTime est émis, le curseur se déplace jusqu'à la fin du graphique et y reste.

Comment puis-je faire en sorte que le "currentTime" de la vidéo se déplace sur le temps correspondant dans le graphique ?

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

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

    "categoryAxesSettings": {
      "minPeriod": "ss", // définir le minimum en millisecondes
      "groupToPeriods": [ 'ss' ] // spécifier le regroupement par périodes
    },

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

Answer 1

showCursorAt a besoin de la valeur de catégorie convertie puisque vous utilisez des horodatages de chaîne. AmCharts convertit les chaînes en objets JavaScript Date, donc vous voulez l'objet Date plutôt que le format de chaîne (notez que la démo audio utilise également des objets Date)

En plus de cela, AmCharts convertit les dates uniquement temporelles (JJ:NN:SS) en dates à partir du 1er janvier 1900. Vous devrez vous assurer que votre conversion correspond. Puisque vous utilisez moment:

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

Vous pouvez également utiliser 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);

Vous devez également définir equalSpacing sur true dans vos categoryAxisSettings pour éviter que le curseur ne vacille.

Démo

Notes non pertinentes -

Il est recommandé de définir des paramètres comme dataDateFormat, recalculateToPercents et parseDates à l'intérieur de l'appel à makeChart plutôt qu'immédiatement après l'appel ou vous rencontrerez des problèmes de synchronisation. Notez également que parseDates est implicite dans un graphique boursier et n'est pas requis.