刚好最近也看了一下TimelineJs应用(V2EX的推荐算法这么屌?不科学- -)
观察了一下github页面的guideline,以内联式为例:
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: '100%',
height: '600',
source: 'path_to_json/or_link_to_googlespreadsheet',
embed_id: 'timeline-embed', //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
start_at_end: false, //OPTIONAL START AT LATEST DATE
start_at_slide: '4', //OPTIONAL START AT SPECIFIC SLIDE
start_zoom_adjust: '3', //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
hash_bookmark: true, //OPTIONAL LOCATION BAR HASHES
font: 'Bevan-PotanoSans', //OPTIONAL FONT
debug: true, //OPTIONAL DEBUG TO CONSOLE
lang: 'fr', //OPTIONAL LANGUAGE
maptype: 'watercolor', //OPTIONAL MAP STYLE
css: 'path_to_css/timeline.css', //OPTIONAL PATH TO CSS
js: 'path_to_js/timeline-min.js' //OPTIONAL PATH TO JS
}
</script>
<script type="text/javascript" src="
http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
其中source:'path_to_json/or_link_to_googlespreadsheet'中的路径修改为json文件在服务器上的位置或者是发布成功的google文档位置, css:'path_to_css/timeline.css'以及js:'path_to_js/timeline-min.js'中的路径也要修改为自己服务器上的位置,或者直接调用knightlab的CDN上的资源。
然后将这段代码插到一个HTML页面上,就能访问了。
实际上,根据
http://timeline.knightlab.com/ 这个页面上的步骤一步一步来,就能迅速生成一个,可以参考学习一下。
最后,我观察了一下LZ的源代码,发现source: result,我琢磨是路径不对?