间隔事件的交互式时间线图[标签;开始：结束]数据？ [英] Interactive timeline charts for interval event [label; start : end] data?
本文介绍了间隔事件的交互式时间线图[标签;开始：结束]数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
[label;开始时间：结束时间]
标签：string 和开始/结束时间以毫秒/微秒为单位
我可以用Google时间轴可视化显示这些数据：
但我想为此添加一些其他属性。由于我的间隔数据将以毫秒为单位。
- 我想让网格间隔可以说一些x值。
- 标记的X轴像0 ---- 5 ---- 10 ---- 15
- 缩放选项 strong>：类似于Google AnnotatedTimeLine中的内容。由于给定的行我们可能有数千个事件，我们有兴趣在给定的时间范围[2200ms-2500ms]内分析详细信息。
如何在TimeLine中放大缩放选项，如上图所示（AnnotatedTimeLine）。 b
$ b
总之，我正在寻找Google TimeLine包中的Google AnnotatedTimeLine功能。我该怎么做？
因为我们的数据是间隔数据（不是时间序列数据），所以我们不能使用AnnotatedTimeLine可视化。
任何帮助将不胜感激。 ：）
首先，没有任何配置选项来控制x轴标签它们是在绘制图表时动态设置的，然后根据显示的时间范围进行更改然后在缩放选项 .com / chart / interactive / docs / gallery / annotationchartrel =nofollow noreferrer>注释图表可作为任何图表的控件使用
使用 ChartRangeFilter 绑定到图表=https://developers.google.com/chart/interactive/docs/gallery/controls#dashboard =nofollow noreferrer>仪表板
见下面的工作片段...
（改编自另一个答案）
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（[[''学生571'，'Pretest'，'学生571开始生物化学学习路径前测'，新日期（2015,08,10,18,52,02），新日期（2015,08,10） ，18,52,27）]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,18,52,27），新日期（2015， 08,10,18,52,32）]，['学生571'，'学习路径'，'学生571观看视频：Bio102水'，新日期（2015,08,10,18,52,32），新日期（2015,08,10,18,52,33）]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,18,52,33 ），新日期（2015,08,10,18,52,40）]，['学生571'，'学习路径'，'学生571查看主要有机化合物的元素'，新日期（2015,08 ，10,18,52,40），新日期（2015,08,10,18,52,55）]，['学生571'，'学习路径'，'学生571查看氨基酸视频'，新日期2015,08,10,18,52,55），新日期（2015,08,10,19,01,48）]，['学生571'， '补充信息'，'学生571查看碳水化合物网站'，新日期（2015,08,10,19,01,48），新日期（2015,08,10,19,01,49）]，''学生571 '学习路径'，'学生571查看脂类教科书'，新日期（2015,08,10,19,01,49），新日期（2015,08,10,19,02,13）]，['学生571，学习路径，学生571观看视频：Bio102水，新日期（2015,08,10,19,02,13），新日期（2015,08,10,19,02,42） ]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,02,42），新日期（2015,08,10,19,03） ，学生571，学习路径，学生571观看氨基酸视频，新日期（2015,08,10,19,03,02），新日期（2015,08,10，新学年（2015,08,10,19,16,08），新日期（2015年，第19,16,08页）]，['学生571'，'学习路径'，'学生571观看视频：Bio102 Water' 08,10,19,16,11）]，['学生571'，'学习路径'，'学生571查看主要有机化合物的元素新的日期（2015,08,10,19,16,11），新的日期（2015,08,10,19,16,18）]，['学生571'，'学习路径'，'学生571观看生物学缓冲网站3（动画）'，新日期（2015,08,10,19,16,18），新日期（2015,08,10,19,16,42）]，['学生571' ，'补充信息'，'学生571查看碳水化合物网站'，新日期（2015,08,10,19,16,42），新日期（2015,08,10,19,16,48）]，''学生571，学习路径，学生571查看脂质教科书，新日期（2015,08,10,19,16,48），新日期（2015,08,10,19,16,53）]， '学生571'，'补充信息'，'学生571查看核酸网站'，新日期（2015,08,10,19,16,53），新日期（2015,08,10,19,16,54） ]，['学生571'，'补充信息'，'学生571观看视频：水的属性'，新日期（2015,08,10,19,16,54），新日期（2015,08,10， 19,16,55）]，['学生571'，'补充信息'，'学生571查看脂类网站'，新日期（2015,08 ，10,19,16,55），新日期（2015,08,10,19,16,57）]，['学生571'，'补充信息'，'学生571查看复合碳水化合物是由单糖 - 生物化学 - NCBI Bookshelf'，新日期（2015,08,10,19,16,57），新日期（2015,08,10,19,17,03）]，['学生571'，'学习路径' ，'学生571观看氨基酸视频'，新日期（2015,08,10,19,17,03），新日期（2015,08,10,19,18,27）]，['学生571'，'问题，学生571回答正确的细胞表面受体问题，新日期（2015,08,10,19,18,27），新日期（2015,08,10,19,18,59）]，[' 学生571，问题，学生571回答细胞表面受体质疑不正确，新日期（2015,08,10,19,18,59），新日期（2015,08,10,19,19,21） ）]，['学生571'，'问题'，'学生571回答细胞表面受体问题'，新日期（2015,08,10,19,19,21），新日期（2015,08,10， 19,19,27）]，['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,19,27），新日期（2015,08,10,19,19,43）]，['学生571'，'学习Path'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,19,43），新日期（2015,08,10,19,19,56）]，''学生571 '学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,19,56），新日期（2015,08,10,19,19,57）]，[ '学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,19,57），新日期（2015,08,10,19,20,33） ）]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,20,33），新日期（2015,08,10,19， 21,00）]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,21,00），新日期（2015,08,10 ，19,21,02）]，['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,21,02），新日期（2015,08,10,19,21,50）]，['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,21， 50），新日期（2015,08,10,19,22,14）]，['学生571'，'问题'，'学生571回答水问题属性正确'，新日期（2015,08,10， 19,22,14），新日期（2015,08,10,19,30,32）]，['学生571'，'学习路径'，'学生571查看主要有机化合物的元素'，新日期（2015,08,10,19,30,32），新日期（2015,08,10,20,21,16）]，['学生571'，'学习路径'，'学生571查看生物缓冲网站3（动画）'，新日期（2015,08,10,20,21,16），新日期（2015,08,10,20,22,01）]，['学生571'，'补充信息'， '学生571查看碳水化合物网站'，新日期（2015,08,10,20,22,01），新日期（2015,08,10,20,23,58）]，['学生571'，'学习路径'，'学生571查看脂类教科书'，新日期（2015,08,10,20,23,58），新日期（2015,0 8,10,20,24,35）]，['学生571'，'补充信息'，'学生571查看核酸网站'，新日期（2015,08,10,20,24,35），新日期（2015,08,10,20,33,34）]，['学生571'，'补充信息'，'学生571观看视频：水的属性'，新日期（2015,08,10,20,33 ，34），新日期（2015,08,10,20,33,53）]，['学生571'，'补充信息'，'学生571观看脂质网站'，新日期（2015,08,10,20） ，33,53），新日期（2015,08,10,20,43,43）]，['学生571'，'补充信息'，'学生571查看复合碳水化合物是由单糖链接形成的 - 生物化学 - NCBI书架'，新日期（2015,08,10,20,43,43），新日期（2015,08,10,20,53,28）]，['学生571'，'测试我'，'学生571新生日期（2015,08,10,20,53,28），新日期（2015,08,10,20,54,36）]]）;生物化学学习途径评估得分为81％ dashboard.bind（控制，图表）; dashboard.draw（data）;}
div.google- visualization-tooltip {font-size：0.9em;填充：10px; width：200px;}
< script src =https ：//www.gstatic.com/charts/loader.js>< / script>< div id =dashboard> < div id =chartstyle =position：relative; width：985px; height：100px;>< / div> < div>选择要放大的时间范围。< / div> < div id =control>< / div>< / div>
I am newbie to JS. I want to visualize the time interval data where each event is defined as follows:
[label; start time: end time]
Label: string And Start/end time are in millisecond/microseconds
I can visualize this data with Google Timeline visualization:
But I want add some other properties to this. Since my interval data will be in milliseconds.
- I want to have grid spaced lets say some x values.
- Labeled X - axis like 0----5----10----15
- Zooming option: Similar to what we have in Google AnnotatedTimeLine. Since a given row we may have thousands of events and we are interested to analyze the details within given time range [2200ms-2500ms].
how can we have zooming option in TimeLine like given in above image(AnnotatedTimeLine ).
In Short, I am seeking Google AnnotatedTimeLine like facilities in Google TimeLine package. How can I do that ?
Since our data is interval data (not a time-series data) we can't use AnnotatedTimeLine visualization.
Any help will be appreciated. :)
解决方案
first, there aren't any configuration options to control the x-axis labels
they are set dynamically when the chart is drawn, and change depending on the time range displayed
next, the zooming option found on an annotation chart is available as a control for any chart
the ChartRangeFilter can be bound to a chart using a Dashboard
see following working snippet...
(adapted from another answer)
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>
这篇关于间隔事件的交互式时间线图[标签;开始：结束]数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
