как создать горизонтальный просмотр видео «Heatmap» с помощью Highcharts

Question

Может кто-то мне точку в правильном направлении, к какому типу диаграммы, чтобы использовать для создания просмотра видео «Heatmap», как показано здесь:

Идея состоит в том, чтобы показать, как зритель просмотрел видео. На изображении выше зеленый = играл; и слоистый oranged = rewatched.

Заранее благодарим за любую помощь.

У меня есть доступ к данным, поэтому я могу отформатировать его любыми средствами. Точка прилипания кажется типом диаграммы для рендеринга, поэтому я начинаю там.

ОБНОВЛЕНИЕ: Я смог создать демо, адаптировав одну из демонстраций Heatmap HighCharts - ограничение, по-видимому, изменяет ширину прямоугольников, чтобы представлять разные длины времени. Демо здесь:

https://jsfiddle.net/alexpcoleman/88e55cfd/

Пример данных:

1970-01-01,0,0.4 
1970-01-01,1,0.3 
1970-01-01,2,0.1 
1970-01-01,3,0.2 
1970-01-01,4,0.7 
1970-01-01,5,1.9 
1970-01-01,6,2.6 
1970-01-01,7,3.2 
1970-01-01,8,2.7 
1970-01-01,9,2.6 
1970-01-01,10,2.9 
1970-01-01,11,4.0 
1970-01-01,12,5.1 
1970-01-01,13,5.8 
1970-01-01,14,6.3 
1970-01-01,15,6.8 
1970-01-01,16,8.7 
1970-01-01,16.5,3.5 
1970-01-01,18,7.4 
1970-01-01,19,7.3 
1970-01-01,20,7.0 
1970-01-01,20.25,2.3 
1970-01-01,20.75,9.3 
1970-01-01,21,6.1 
1970-01-01,22,5.6 
1970-01-01,23,4.5 
1970-01-01,50,2.5 
1970-01-01,50.25,6.5 
1970-01-01,51.25,9.5 
1970-01-01,55,2.5 

Highcharts JS из демо:

$('#stats_sessions').highcharts({ 

    data: { 
    csv: document.getElementById('csv').innerHTML 
    }, 

    chart: { 
    type: 'heatmap', 
    inverted: true 
    }, 


    title: { 
    text: 'Test Video Heatmap' 
    }, 

    xAxis: { 
    tickPixelInterval: 50, 
    // min: Date.UTC(2015, 4, 1), 
    // max: Date.UTC(2015, 4, 30) 
    }, 

    yAxis: { 
    title: { 
     text: null 
    }, 
    labels: { 
     format: '{value}:00' 
    }, 
    minPadding: 0, 
    maxPadding: 0, 
    startOnTick: false, 
    endOnTick: false, 
    tickWidth: 1, 
    // tickPositions: [0, 6, 12, 18, 24], 
    // min: 0, 
    // max: 23 
    // tickPositions: [0, 10, 20, 30, 40, 50, 60], 
    min: 0, 
    max: 150.5 // <- VIDEO LENGTH 
    }, 

    colorAxis: { 
    stops: [ 
     [0, '#3060cf'], 
     [0.5, '#fffbbc'], 
     [0.9, '#c4463a'] 
    ], 
    min: -5 
    }, 

    series: [{ 
    borderWidth: 0, 
    // colsize: 24 * 36e5, // one day 
    tooltip: { 
     headerFormat: 'Temperature<br/>', 
     pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>' 
    } 
    }] 

}); 

Answer 1

Ваше видео имеет такие параметры, как CURRENTTIME или durration. Вы можете использовать их в своем графике.

Если вы правильно поняли, вы можете сделать стандартную диаграмму тепловой карты и обновить точки, значения которых равны вашему текущему значению. Поскольку этот CURRENTTIME это число с плавающей точкой, я думаю, что самая простая идея состоит в том, чтобы использовать Math.Floor(), чтобы сделать целое число от этого значения: http://www.w3schools.com/jsref/jsref_floor.asp

Вы можете обновить свои точки внутри timeupdate функции обратного вызова событие Слушатель:

video.addEventListener("timeupdate", function() { 
     if (Math.floor(currentTime) !== Math.floor(this.currentTime)) { 
     currentTime = Math.floor(this.currentTime); 
     if (series.data[currentTime - 1]) { 
      value = series.data[currentTime - 1].value; 
      if (!value) { 
      value = 0; 
      } 
      series.data[currentTime - 1].update({ 
      value: value + 1 
      }) 
     } 
     } 
    }); 

Здесь вы можете увидеть пример того, как это может работать: http://jsfiddle.net/59s7ao0s/10/

С уважением.