Timeline display tool Timeline [1] can display a Timeline on the web page. In time-related data presentation, it has a better effect. The specific usage is as follows.
1. Write html pages, introduce JS scripts, introduce JSON data, and set the calendar location to be displayed.
<Scriptsrc = "http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js? Bundle = true "type =" text/javascript "> </script>
<Scriptsrc = "local_data2.js" type = "text/javascript"> </script>
<Divid = 'tl '> </div>
2. Compile the Loading Function and call it on the webpage.
<Script>
Var tl;
Function onLoad (){
Var tl_el = document. getElementById ("tl ");
Var eventSource1 = newTimeline. DefaultEventSource ();
Var theme1 = Timeline. ClassicTheme. create ();
Theme1.autoWidth = true; // Set theTimeline's "width" automatically.
// SetautoWidth on the Timeline's first band's theme,
// Willaffect all bands.
Theme1.timeline _ start = newDate (Date. UTC (1980, 0, 1 ));
Theme1.timeline _ stop = new Date (Date. UTC (2150, 0, 1 ));
Var d = Timeline. DateTime. parseGregorianDateTime ("1980 ")
Var bandInfos = [
Timeline. createBandInfo ({
Width: 45, // set to a minimum, autoWidthwill then adjust
IntervalUnit: Timeline. DateTime. DECADE,
IntervalPixels: 200,
EventSource: eventSource1,
Date: d,
Theme: theme1,
Layout: 'original' // original, overview, detailed
})
];
// Create the Timeline
Tl = Timeline. create (tl_el, bandInfos, Timeline. HORIZONTAL );
Var url = '.'; // The base url forimage, icon and background image
// References in thedata
EventSource1.loadJSON (timeline_data, url); // The data was stored beyond
// Timeline_data variable.
Tl. layout (); // display theTimeline
}
Var resizeTimerID = null;
Function onResize (){
If (resizeTimerID = null ){
ResizeTimerID = window. setTimeout (function (){
ResizeTimerID = null;
Tl. layout ();
},500 );
}
}
</Script>
Call this function: <body onload = "onLoad ();" onresize = "onResize ();">
3. Compile a JSON file containing the event
Vartimeline_data = {// save as a globalvariable
'Datetimeformat': 'iso8601 ',
'Wikiurl': "http://simile.mit.edu/shelf ",
'Wikisection ': "Simile Cubism Timeline ",
'Events ':[
{'Start': '123 ',
'Title': 'birthday of gongqingkui ',
'Description': 'This is description ',
'Image': 'http: // portrait7.sinaimg.cn/1150968582/blog/180 ',
'Link': 'http: // blog.sina.com.cn/gongqingkui ',
'Icon ': "dark-red-circle.png ",
'Color': 'red ',
'Textcolor': 'green'
},
{'Start': '123 ',
'End': '123 ',
'Isduration': true,
'Title': 'aaa ',
// 'Tapimage': 'blue_stripes.png ',
'Taperepeid': 'Repeat-x ',
'Caption ': "This is the event 'scaption attribute .",
'Classname': 'hot _ event'
},
]
}
The JSON data currently includes a point event and a period of time.
4. Loading Effect