Javascript “如何创建水平视频观看”；“热图”；使用海图

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

其目的是展示观众是如何观看视频的。在上图中，绿色=播放；分层橙色=重新观看

提前感谢您的帮助

我可以访问数据，所以我可以用任何必要的方式格式化它。关键点似乎是要渲染的图表类型，所以我从这里开始

更新：我已经能够通过调整HighCharts热图演示之一来创建一个演示–限制似乎只是改变矩形的宽度以表示不同的时间长度。此处演示：

示例数据：

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>'
    }
  }]

});

$（'stats_sessions'）。高图({
数据：{
csv:document.getElementById（'csv'）.innerHTML
},
图表：{
类型：'热图'，
倒过来：是的
},
标题：{
文本：“测试视频热图”
},
xAxis：{
像素间隔：50，
//最小值：UTC日期（2015年4月1日），
//最大值：UTC日期（2015年4月30日）
},
亚克斯：{
标题：{
文本：空
},
标签：{
格式：“{value}:00”
},
数字：0，
maxPadding:0，
startOnTick：错，
恩东蒂克：错，
宽度：1，
//位置：[0,6,12,18,24]，
//分:0,，
//最高：23
//位置：[0,10,20,30,40,50,60]，
分:0,，
max:150.5/您的视频具有currentTime或durration等参数。您可以在图表中使用它们

如果我理解正确，您可以制作标准热图并更新x值等于currentTime值的点。因为currentTime是浮点数，我认为最简单的方法是使用Math.floor（）从该值生成整数：

您可以在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
          })
        }
      }
    });

在这里，您可以看到一个示例，它是如何工作的：

问候。
您的视频中有currentTime或durration等参数。您可以在图表中使用它们

如果我理解正确，您可以制作标准热图并更新x值等于currentTime值的点。因为currentTime是浮点数，我认为最简单的方法是使用Math.floor（）从该值生成整数：

您可以在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
          })
        }
      }
    });

在这里，您可以看到一个示例，它是如何工作的：

亲切问候。
如果没有更多信息，我可能会使用一个简单的叠加条。每个段代表一个相同状态的未中断时段。您的数据是什么样子的？@jlbiggs我不确定叠加条是否有效，因为我基本上需要一个叠加条，它可以出现在沿途的任何点上。例如：person may观看（秒）[0.0-5.5]；然后擦洗并观看[20.5-40]；然后重新观看[2.5-5.5].所以我需要一种方法来描述所有这些。在这种情况下，我会使用columnrange系列类型-在图表选项中将反转属性设置为true，并为每个数据点提供相同的x值。这应该允许重叠。您需要确保在每个重叠中需要位于顶部的段具有更高的索引。我可能会每段类型制作一个系列。你能解释一下每个数据点代表什么吗？如果没有更多信息，我可能会使用一个简单的堆叠条。每个段代表一个相同状态的未中断周期。你的数据是什么样子的？@jlbigs我不确定堆叠条是否有效，因为我基本上需要可以n出现在沿途的任何一点。例如：某人可能已经观看（以秒计）[0.0-5.5]；然后擦洗并观看[20.5-40]；然后重新观看[2.5-5.5].所以我需要一种方法来描述所有这些。在这种情况下，我会使用columnrange系列类型-在图表选项中将反转属性设置为true，并为每个数据点提供相同的x值。这应该允许重叠。您需要确保在每个重叠中需要位于顶部的段具有更高的索引。我可能会每段类型制作一个系列。你能解释一下每个数据点代表什么吗？看起来很完美。谢谢！看起来很完美。谢谢！