Є такий засіб для відображення події у часі : SIMILE Timeline - Web Widget for Visualizing Temporal Data. Написаний на JavaScript.
Якщо використовувати версію timeline 2.3.1 то відображення може бути у ось такому вигляді:
Якщо, налаштувати тему так :
var theme = Timeline.ClassicTheme.create();
theme.event.tape.height = 15;
А якщо потрібно щоб підписи були у тому рядку що і події, то я зробив модифікацію для функції Timeline.OriginalEventPainter.
patch
#cd html/js/timeline/api/scripts
# diff original-painter.js original-painter.js.0
347,353c347
< var labelLeft;
< if ((startPixel+labelSize.width) > endPixel){
< labelLeft = endPixel;
< }else{
< labelLeft = startPixel;
< }
<
---
> var labelLeft = startPixel;
358,361c352,354
< //var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement + theme.event.tape.height);
<
< var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement);
<
---
> var labelTop = Math.round(
> metrics.trackOffset + track * metrics.trackIncrement + theme.event.tape.height);
>
512c505
< var color = '#fff';//evt.getTextColor();
---
> var color = evt.getTextColor();
html/js/timeline/api/scripts/original-painter.js: ст
Timeline.OriginalEventPainter.prototype.paintPreciseDurationEvent = ...
....
var labelLeft;
if ((startPixel+labelSize.width) > endPixel){
labelLeft = endPixel;
}else{
labelLeft = startPixel;>
}
var labelRight = labelLeft + labelSize.width;
var rightEdge = Math.max(labelRight, endPixel);
var track = this._findFreeTrack(evt, rightEdge);
var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement);
...
index.html:
....
<script>
Timeline_ajax_url="/js/timeline/timeline_ajax/simile-ajax-api.js?bundle=true";
Timeline_urlPrefix="/js/timeline/timeline_js/";
Timeline_parameters='bundle=true';
</script>
<script src="/js/timeline/timeline_js/timeline-api.js" type="text/javascript"></script>
<script src="/js/timeline/api/scripts/original-painter.js" type="text/javascript"></script>
var theme = Timeline.ClassicTheme.create();
theme.event.tape.height = 15;
var d = Timeline.DateTime.parseGregorianDateTime(new Date())
var bandInfos = [
Timeline.createBandInfo({
showEventText: false,
width: "60%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 200,
eventSource: eventSource,
date: d,
theme: theme,
layout: 'original' // original, overview, detailed
}),
Timeline.createBandInfo({
width: "20%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 200,
eventSource: eventSource,
date: d,
theme: theme,
layout: 'overview' // original, overview, detailed
}),
Timeline.createBandInfo({
width: "20%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200,
eventSource: eventSource,
date: d,
theme: theme,
layout: 'overview' // original, overview, detailed
})
];
bandInfos[1].syncWith = 0;
bandInfos[2].syncWith = 1;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("tl"), bandInfos);
...
<body onload="onLoad()">
<div id="body">
<h1>Timeline</h1>
<div id="tl" class="timeline-default dark-theme" style="height: 650px; margin: 2em;">
</div>
<noscript>
This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.
</noscript>
</div>
</body>
</html>
Якщо використовувати версію timeline 2.3.1 то відображення може бути у ось такому вигляді:
 |
| Базове відображення |
Якщо, налаштувати тему так :
var theme = Timeline.ClassicTheme.create();
theme.event.tape.height = 15;
 |
| theme.event.tape.height = 15 |
patch
#cd html/js/timeline/api/scripts
# diff original-painter.js original-painter.js.0
347,353c347
< var labelLeft;
< if ((startPixel+labelSize.width) > endPixel){
< labelLeft = endPixel;
< }else{
< labelLeft = startPixel;
< }
<
---
> var labelLeft = startPixel;
358,361c352,354
< //var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement + theme.event.tape.height);
<
< var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement);
<
---
> var labelTop = Math.round(
> metrics.trackOffset + track * metrics.trackIncrement + theme.event.tape.height);
>
512c505
< var color = '#fff';//evt.getTextColor();
---
> var color = evt.getTextColor();
html/js/timeline/api/scripts/original-painter.js: ст
Timeline.OriginalEventPainter.prototype.paintPreciseDurationEvent = ...
....
var labelLeft;
if ((startPixel+labelSize.width) > endPixel){
labelLeft = endPixel;
}else{
labelLeft = startPixel;>
}
var labelRight = labelLeft + labelSize.width;
var rightEdge = Math.max(labelRight, endPixel);
var track = this._findFreeTrack(evt, rightEdge);
var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement);
...
index.html:
....
<script>
Timeline_ajax_url="/js/timeline/timeline_ajax/simile-ajax-api.js?bundle=true";
Timeline_urlPrefix="/js/timeline/timeline_js/";
Timeline_parameters='bundle=true';
</script>
<script src="/js/timeline/timeline_js/timeline-api.js" type="text/javascript"></script>
<script src="/js/timeline/api/scripts/original-painter.js" type="text/javascript"></script>
var theme = Timeline.ClassicTheme.create();
theme.event.tape.height = 15;
var d = Timeline.DateTime.parseGregorianDateTime(new Date())
var bandInfos = [
Timeline.createBandInfo({
showEventText: false,
width: "60%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 200,
eventSource: eventSource,
date: d,
theme: theme,
layout: 'original' // original, overview, detailed
}),
Timeline.createBandInfo({
width: "20%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 200,
eventSource: eventSource,
date: d,
theme: theme,
layout: 'overview' // original, overview, detailed
}),
Timeline.createBandInfo({
width: "20%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200,
eventSource: eventSource,
date: d,
theme: theme,
layout: 'overview' // original, overview, detailed
})
];
bandInfos[1].syncWith = 0;
bandInfos[2].syncWith = 1;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("tl"), bandInfos);
...
<body onload="onLoad()">
<div id="body">
<h1>Timeline</h1>
<div id="tl" class="timeline-default dark-theme" style="height: 650px; margin: 2em;">
</div>
<noscript>
This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.
</noscript>
</div>
</body>
</html>
 |
| Після модифікації функції Timeline.OriginalEventPainter |
Немає коментарів:
Дописати коментар