如何将Highcharts可拖动情节线用作视频时间线反之亦然

问题描述

对此我感到沮丧。如何连接这两个元素？

示例包含具有可拖动绘图线和导出值的随机数据，您可以在此处jsfiddle

$(function () {

function draggablePlotLine(axis,plotLineId) {
    var clickX,clickY;

    var getPlotLine = function () {
        for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
            if (axis.plotLinesAndBands[i].id === plotLineId) {
                return axis.plotLinesAndBands[i];
            }
        }
    };
    
    var getValue = function() {
        var plotLine = getPlotLine();
        var translation = axis.horiz ? plotLine.svgElem.translateX : plotLine.svgElem.translateY;
        var new_value = axis.tovalue(translation) - axis.tovalue(0) + plotLine.options.value;
        new_value = Math.max(axis.min,Math.min(axis.max,new_value));
        return new_value;
    };

    var drag_start = function (e) {
        $(document).bind({
            'mousemove.line': drag_step,'mouseup.line': drag_stop    

感谢您的咨询！

解决方法

我认为，像下面的演示中所做的一样，可能是实现您所描述的内容的一个良好的开端。

演示：https://jsfiddle.net/BlackLabel/s2r0u96p/

// render an empty chart
var chart = Highcharts.chart('container',{

  series: [{
    data: []
  }]
});

我在注释中描述了所有内容，因此应该清楚代码中正在发生什么。接下来要做的是添加拖放回卷器并使用https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime更改视频值。如果您遇到麻烦，请重做您的尝试，我会尽力提供帮助。

API：https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotLine