2
Мне нужна помощь в синхронизации временной шкалы видео с точкой выбора данных серии кривых. Чтобы лучше объяснить, что я хочу делать, и что я сделал до сих пор, посмотрите на my exampleHighcharts series data select point video sync
Мне нужно, чтобы выбранная точка перестала мигать. Мне нужно более жидкое движение. Я пробовал некоторые трюки, но безуспешно.
Любая помощь будет очень желанной.
var video = document.getElementById("Video");
$(function() {
$('#container').highcharts({
chart: {
type: 'spline',
margin: [0, 0, 0, 0]
},
title: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
subtitle: {
text: ''
},
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
text: null,
labels: {
enabled: false
}
},
yAxis: {
title: {
text: null
},
max: 100,
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
labels: {
enabled: false
},
plotLines: [{
value: 70.345255,
color: '#62acdf',
dashStyle: 'dot',
width: 1
}, {
value: 29.654745,
color: '#62acdf',
dashStyle: 'dot',
width: 1
}],
plotBands: [{
from: 29.654745,
to: 70.345255,
color: 'rgba(98,172,223,0.1)'
}]
},
tooltip: {
formatter: function() {
return this.x/2 + 's<br>' + '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b> ' + this.y.toFixed(2) + '</b>';
}
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function() {
video.currentTime = (this.x/2);
video.pause();
}
}
},
marker: {
radius: 1,
states: {
select: {
radius: 3,
fillColor: '#62acdf',
lineColor: '#62acdf',
lineWidth: 4
}
}
}
},
spline: {
lineWidth: 2,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: true
}
}
},
series: [{
name: 'txt',
color: '#62acdf',
data: [{
y: 30.866000,
color: '#BF0B23',
radius: 0
}, {
y: 42.868000,
color: '#BF0B23',
radius: 0
}, {
y: 46.859000,
color: '#BF0B23',
radius: 0
}, {
y: 51.062000,
color: '#BF0B23',
radius: 0
}, {
y: 68.203000,
color: '#BF0B23',
radius: 0
}, {
y: 56.879000,
color: '#BF0B23',
radius: 0
},
72.250000, {
y: 35.184000,
color: '#BF0B23',
radius: 0
}, {
y: 66.606000,
color: '#BF0B23',
radius: 0
}, {
y: 34.417000,
color: '#BF0B23',
radius: 0
},
19.729000, 22.328000, 26.512000, 8.023900, 23.775000, 19.330000, 18.326000, {
y: 43.427000,
color: '#BF0B23',
radius: 0
}, {
y: 37.062000,
color: '#BF0B23',
radius: 0
}, {
y: 49.789000,
color: '#BF0B23',
radius: 0
}, {
y: 42.211000,
color: '#BF0B23',
radius: 0
}, {
y: 50.581000,
color: '#BF0B23',
radius: 0
},
16.836000, 14.436000, 9.622700, 6.944100, 28.147000, 16.000000, {
y: 45.813000,
color: '#BF0B23',
radius: 0
}, {
y: 48.373000,
color: '#BF0B23',
radius: 0
}, {
y: 64.385000,
color: '#BF0B23',
radius: 0
}, {
y: 42.571000,
color: '#BF0B23',
radius: 0
}, {
y: 65.816000,
color: '#BF0B23',
radius: 0
},
10.839000, 21.495000, {
y: 47.478000,
color: '#BF0B23',
radius: 0
},
10.273000, 29.029000, 21.656000, 15.887000, 15.531000, {
y: 55.848000,
color: '#BF0B23',
radius: 0
},
70.714000, {
y: 50.479000,
color: '#BF0B23',
radius: 0
}, {
y: 64.778000,
color: '#BF0B23',
radius: 0
}, {
y: 67.984000,
color: '#BF0B23',
radius: 0
}, {
y: 60.161000,
color: '#BF0B23',
radius: 0
}, {
y: 32.788000,
color: '#BF0B23',
radius: 0
},
27.038000, {
y: 30.471000,
color: '#BF0B23',
radius: 0
},
27.768000, {
y: 34.068000,
color: '#BF0B23',
radius: 0
}, {
y: 43.744000,
color: '#BF0B23',
radius: 0
},
72.629000, {
y: 52.510000,
color: '#BF0B23',
radius: 0
}, {
y: 55.916000,
color: '#BF0B23',
radius: 0
}, {
y: 64.293000,
color: '#BF0B23',
radius: 0
},
74.891000, {
y: 48.053000,
color: '#BF0B23',
radius: 0
},
22.576000, {
y: 50.433000,
color: '#BF0B23',
radius: 0
}, ]
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
});
var curves = $('#container').highcharts();
video.addEventListener("timeupdate", function() {
var percent = (this.currentTime/this.duration);
var posicao = (percent * curves.series[0].data.length).toFixed(0);
curves.series[0].data[posicao].select();
}, false);
[ссылка] (http://jsfiddle.net/wanderly/59s7ao0s/1/) наконец-то я получил то, что мне нужно. проверьте мой окончательный код. Благодарю. – WDornelles