javascript - 如何使用 Highcharts 创建水平视频观看 "heatmap"

Question

有人可以指出正确的方向，告诉我使用哪种类型的图表来创建视频观看“热图”，如下所示:

这个想法是为了显示观众如何观看视频。在上图中，绿色 = 已播放；分层橙色 = 重新观看。

预先感谢您的帮助。

我有权访问数据，因此我可以以任何必要的方式对其进行格式化。症结似乎是要渲染的图表类型，所以我从这里开始。

更新:我已经能够通过改编 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

您的视频具有当前时间或持续时间等参数。您可以在图表中使用它们。

如果我理解正确，您可以制作标准热图并更新 x 值等于您当前时间值的点。因为这个 currentTime 是 float ，所以我认为最简单的想法是使用 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/

亲切的问候。