Question

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

这个想法是为了展示观众如何观看视频。在上图中，绿色=播放;和分层的oranged =重新分配。

提前感谢您的帮助。

我可以访问数据，因此我可以用任何必要的方式对其进行格式化。粘贴点似乎是要呈现的图表类型，所以我从那里开始。

更新：我已经能够通过调整其中一个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

来自demo的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等参数。您可以在图表中使用它们。

如果我理解正确，您可以制作标准热图图表并更新x值等于currentTime值的点。因为这个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/

亲切的问候。

如何使用Highcharts

1 个答案: