javascript - 间隔事件的交互式时间线图表[标签；开始 : end] data?

Question

我是 JS 新手。我想可视化每个事件定义如下的时间间隔数据:

[label; start time: end time]

标签:字符串 和开始/结束时间以毫秒/微秒为单位

我可以使用 Google 时间轴可视化来可视化这些数据:

但我想为此添加一些其他属性。因为我的间隔数据将以毫秒为单位。

• 我想要网格间距让我们说一些 x 值。
• X轴标记为0----5----10----15
• 缩放选项:类似于我们在 Google AnnotatedTimeLine 中的选项。由于给定的行我们可能有数千个事件，我们有兴趣分析给定时间范围 [2200ms-2500ms] 内的详细信息。

我们如何才能像上图 (AnnotatedTimeLine) 中给出的那样在 TimeLine 中设置缩放选项。

简而言之，我在 Google TimeLine 包中寻找类似 Google AnnotatedTimeLine 的设施。我该怎么做？

由于我们的数据是区间数据(不是时间序列数据)，我们不能使用 AnnotatedTimeLine 可视化。

任何帮助将不胜感激。 :)

Answer 1

首先，没有configuration options控制 x 轴标签
它们是在绘制图表时动态设置的，并根据显示的时间范围而变化

接下来，在 annotation chart 上找到的缩放选项可用作任何图表的控件

ChartRangeFilter可以使用 Dashboard 绑定(bind)到图表

请参阅以下工作片段...

(改编自另一个答案)

google.charts.load('current', {
  callback: drawDashboard,
  packages: ['controls']
});

function drawDashboard() {
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    options: {
      filterColumnIndex: 3,
      ui: {
        minRangeSize: (60 * 60 * 1000),
        chartType: 'TimeLine',
        chartOptions: {
          width: 900,
          height: 70,
          chartArea: {
            width: '100%',
            height: '80%'
          },
          hAxis: {
            baselineColor: 'none'
          }
        },
        chartView: {
          columns: [3, 4]
        }
      }
    }
  });

  google.visualization.events.addListener(control, 'error', function (error) {
    console.log('error: ' + error.id + ' - ' + error.message);
    google.visualization.errors.removeError(error.id);
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    containerId: 'chart',
    options: {
      width: 985,
      height: 600,
      chartArea: {
        width: '100%',
        height: '80%'
      },
      tooltip: {
        isHtml: true
      }
    },
    view: {
      columns: [0, 1, 2, 3, 4]
    }
  });

  var data = new google.visualization.DataTable();
  data.addColumn({ type: 'string', id: 'Student' });
  data.addColumn({ type: 'string', id: 'Event Type' });
  data.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}});
  data.addColumn({ type: 'datetime', id: 'Start' });
  data.addColumn({ type: 'datetime', id: 'End' });
  data.addRows([
    ['Student 571', 'Pretest', 'Student 571 began Biological Chemistry Learning Path Pretest', new Date(2015,08,10,18,52,02), new Date(2015,08,10,18,52,27)],
    ['Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,27), new Date(2015,08,10,18,52,32)],
    ['Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 water', new Date(2015,08,10,18,52,32), new Date(2015,08,10,18,52,33)],
    ['Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,33), new Date(2015,08,10,18,52,40)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,18,52,40), new Date(2015,08,10,18,52,55)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Amino Acids videos', new Date(2015,08,10,18,52,55), new Date(2015,08,10,19,01,48)],
    ['Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,01,48), new Date(2015,08,10,19,01,49)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,01,49), new Date(2015,08,10,19,02,13)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Video: Bio102 Water', new Date(2015,08,10,19,02,13), new Date(2015,08,10,19,02,42)],
    ['Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,02,42), new Date(2015,08,10,19,03,02)],
    ['Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,03,02), new Date(2015,08,10,19,16,08)],
    ['Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,16,08), new Date(2015,08,10,19,16,11)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,16,11), new Date(2015,08,10,19,16,18)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,19,16,18), new Date(2015,08,10,19,16,42)],
    ['Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,16,42), new Date(2015,08,10,19,16,48)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,16,48), new Date(2015,08,10,19,16,53)],
    ['Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,19,16,53), new Date(2015,08,10,19,16,54)],
    ['Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,19,16,54), new Date(2015,08,10,19,16,55)],
    ['Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,19,16,55), new Date(2015,08,10,19,16,57)],
    ['Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08,10,19,16,57), new Date(2015,08,10,19,17,03)],
    ['Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,17,03), new Date(2015,08,10,19,18,27)],
    ['Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,18,27), new Date(2015,08,10,19,18,59)],
    ['Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question incorrectly', new Date(2015,08,10,19,18,59), new Date(2015,08,10,19,19,21)],
    ['Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,19,21), new Date(2015,08,10,19,19,27)],
    ['Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,27), new Date(2015,08,10,19,19,43)],
    ['Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,43), new Date(2015,08,10,19,19,56)],
    ['Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,19,56), new Date(2015,08,10,19,19,57)],
    ['Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,57), new Date(2015,08,10,19,20,33)],
    ['Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,20,33), new Date(2015,08,10,19,21,00)],
    ['Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,21,00), new Date(2015,08,10,19,21,02)],
    ['Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,02), new Date(2015,08,10,19,21,50)],
    ['Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,50), new Date(2015,08,10,19,22,14)],
    ['Student 571', 'Questions', 'Student 571 answered Properties of Water question correctly', new Date(2015,08,10,19,22,14), new Date(2015,08,10,19,30,32)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,30,32), new Date(2015,08,10,20,21,16)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,20,21,16), new Date(2015,08,10,20,22,01)],
    ['Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,20,22,01), new Date(2015,08,10,20,23,58)],
    ['Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,20,23,58), new Date(2015,08,10,20,24,35)],
    ['Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,20,24,35), new Date(2015,08,10,20,33,34)],
    ['Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,20,33,34), new Date(2015,08,10,20,33,53)],
    ['Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,20,33,53), new Date(2015,08,10,20,43,43)],
    ['Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08, 10,20,43,43), new Date(2015,08, 10,20,53,28)],
    ['Student 571', 'Test Me', 'Student 571 scored 81% on Biological Chemistry Learning Path assessment', new Date(2015,08,10,20,53,28), new Date(2015,08,10,20,54,36)]
  ]);

  dashboard.bind(control, chart);
  dashboard.draw(data);
}

div.google-visualization-tooltip {
  font-size: 0.9em;
  padding: 10px;
  width: 200px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="chart" style="position: relative; width: 985px; height: 100px;"></div>
  <div>Select a time range to zoom in.</div>
  <div id="control"></div>
</div>