如何使用 highcharts 可拖动情节线作为视频时间线（反之亦然）

Question

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

带有可拖动绘图线和导出值的随机数据示例，您可以在此处找到 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

感谢指教！

Answer 1

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

演示：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

如何使用 highcharts 可拖动情节线作为视频时间线（反之亦然）

How can I use highcharts draggable plotline as video timeline (vice versa)

javascript

graph

highcharts

video.js