前端数据可视化【免费下载链接】TimelineJSTimelineJS: A Storytelling Timeline built in JavaScript.项目地址https://gitcode.com/gh_mirrors/ti/TimelineJS点击查看免费下载本指南以仓库 examples/README.md 为核心完整讲解如何在本机运行 TimelineJS 自带的示例页面、两种嵌入式初始化方式timeline_config变量与createStoryJS()方法、全部配置选项的取值与默认值以及 JSON / JSONP / Google Docs / Storify 四种数据来源的完整数据模型。读完本文你将能独立搭建本地示例环境、读懂示例 HTML 的初始化原理并写出可被 TimelineJS 正确解析的时间线数据文件。一、为什么示例必须在本地 Web 服务器中运行examples/README.md开篇第一条就强调了一个关键约束这些示例必须通过本地 Web 服务器访问直接双击 HTML 文件file://协议打开是不会工作的。原因在于示例页面通过source配置加载同目录下的 JSON/JSONP 数据文件如 example_json.html 加载example_json.json而浏览器对file://页面发起的 XHR 请求存在跨源限制数据无法被读取。文档给出了基于 Python 的标准操作步骤打开终端terminal shell确保当前位于从 GitHub 检出的仓库根目录执行python -m SimpleHTTPServer 8000在浏览器中访问http://localhost:8000/examples/example_json.html或换成你想看的其他示例文件。需要说明的是SimpleHTTPServer是 Python 2 时代的模块名如果本机是 Python 3等价命令是python3 -m http.server 8000其行为一致把当前目录作为站点根目录在 8000 端口提供静态文件服务。这也是为什么第 2 步要求先进入仓库根目录——只有这样才能通过/examples/...路径访问到示例。仓库同时提供 examples/ 目录与配套的 tests/ 测试页面均可按同样的方式在浏览器中打开验证。二、examples 目录五类示例页面一览仓库 examples/ 目录提供了五种不同数据来源或初始化方式的示例可对照README.markdown中Add it to your site章节使用示例文件数据来源初始化方式要点example_json.html本地example_json.jsontimeline_config全局变量最基本的 JSON 本地加载example_jsonp.html本地example_jsonp.jsonptimeline_config全局变量演示.jsonp扩展名数据example_googlespreadsheet.htmlGoogle Docs 电子表格发布链接timeline_config全局变量source直接填表格 Web 发布 URLexample_jquery_load.html本地example_json.jsoncreateStoryJS() jQuery$(document).ready方法式初始化的典型写法example_storify.htmlStorify 故事链接timeline_config全局变量source填http://storify.com/...以 example_json.html 为例其核心片段只有三部分一个承载时间线的div idtimeline-embed、一段定义timeline_config的内联脚本、以及引入引导脚本storyjs-embed.js!-- BEGIN Timeline Embed -- div idtimeline-embed/div script typetext/javascript var timeline_config { width: 100%, height: 100%, source: example_json.json } /script script typetext/javascript src../build/js/storyjs-embed.js/script !-- END Timeline Embed--注意source这里填的是相对路径example_json.json它相对于页面所在 URL即http://localhost:8000/examples/example_json.json解析。示例页面默认从仓库根目录的../build/js/storyjs-embed.js加载引导脚本如果你的检出环境中没有该构建产物可改从 Knight Lab CDN 加载见下文资源加载方式。三、嵌入式初始化两种方式与底层原理README.markdown给出了两种初始化时间线的方式仓库源码 source/js/Core/Embed/Embed.js 正好揭示了二者的统一入口。方式一timeline_config全局变量最简单在放置时间线的div之后定义一个名为timeline_config的全局对象再引入storyjs-embed.jsdiv idtimeline-embed/div script typetext/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 typetext/javascript srchttps://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js/script从 Embed.js 的注释与实现可以看出底层机制引导脚本在页面加载时按固定顺序检查四个 window 级变量的定义——url_config、timeline_config、storyjs_config、config——只要其中某个是 object 类型就立即调用createStoryJS(config)自动实例化时间线如果四个变量都不存在则需要你手动调用createStoryJS(your_config)。这意味着timeline_config只是约定俗成的名字源码层面其实支持这四种命名。方式二createStoryJS()方法高级在storyjs-embed.js加载完成后也可以显式调用createStoryJS()createStoryJS({ type: timeline, width: 800, height: 600, source: path_to_json/or_link_to_googlespreadsheet, embed_id: my-timeline // ID of the DIV you want to load the timeline into });example_jquery_load.html 展示了与 jQuery 配合的完整写法先引入 jQuery 与storyjs-embed.js再在$(document).ready回调里调用createStoryJS并把embed_id指向页面中已存在的div idmy-timelinehead !-- jQuery -- script typetext/javascript srchttp://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js/script !-- BEGIN TimelineJS -- script typetext/javascript srchttps://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js/script script $(document).ready(function() { createStoryJS({ type: timeline, width: 800, height: 600, source: path_to_json/or_link_to_googlespreadsheet, embed_id: my-timeline }); }); /script !-- END TimelineJS -- /head body div idmy-timeline/div /body方式一适合把时间线塞进任意页面的快速场景方式二则适合在脚本逻辑中按需创建、动态更换数据源的高级场景。资源加载方式CDN 与本地自托管最简单的做法是直接从 Knight Lab CDN 加载其中storyjs-embed.js会自动拉起其余 Timeline 资源。若需要更细粒度的控制可分别加载 CSS 与 JS!-- always load the CSS -- link relstylesheet typetext/css hrefhttps://cdn.knightlab.com/libs/timeline/latest/css/timeline.css !-- and then one of either -- script typetext/javascript srchttps://cdn.knightlab.com/libs/timeline/latest/js/timeline.js/script !-- or -- script typetext/javascript srchttps://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js/script !-- but no need for both --timeline.js与timeline-min.js二选一即可无需同时引入。如需在自有服务器上托管全部文件可把仓库构建产物build 目录内容整体部署本地storyjs-embed.js会自动从同源加载其余 Timeline 资源。四、配置选项Config Options全解本节逐项说明timeline_config/createStoryJS()参数的含义、默认值与源码依据。其中大部分默认值都能在 source/js/VMM.Timeline.js 的配置合并逻辑中找到一一对应的实现。4.1source数据来源source可以是一个JSON 资源的路径字符串也可以是一个直接对应 Timeline 数据模型的 JavaScript 对象var dataObject {timeline: {headline: Headline, type: ... }} createStoryJS({ type: timeline, width: 800, height: 600, source: dataObject, embed_id: my-timeline });当source是字符串时TimelineJS 会尝试自动识别资源类型Twitter 搜索、Google Spreadsheet 或 Storify 故事链接会被自动识别其余情况按 JSON 或 JSONP 处理字符串以.jsonp结尾则视为 JSONP否则默认追加?callbackonJSONP_Data参数请求数据。4.2lang本地化语言默认值为en英语。仓库 source/js/Core/Language/locale/ 目录下每个文件对应一种语言与文档列出的可用语言一一对应语言代码语言语言代码语言afAfrikaansarArabichyArmenianeuBasquebeBelarusianbgBulgariancaCatalanzh-cnChinesehrCroatian / HrvatskiczCzechdaDanishnlDutchenEnglishen-24hrEnglish (24-hour time)eoEsperantoetEstonianfoFaroesefaFarsifiFinnishfrFrenchfyFrisianglGaliciankaGeorgiandeGerman / DeutschelGreekheHebrewhiHindihuHungarianisIcelandicidIndonesiangaIrishitItalianjaJapanesekoKoreanlvLatvianltLithuanianlbLuxembourgishmsMalayneNepalinoNorwegianplPolishptPortuguesept-brPortuguese (Brazilian)roRomanianrmRomanshruRussiansr-cySerbian - CyrillicsrSerbian - LatinsiSinhaleseskSlovakslSlovenianesSpanishsvSwedishtlTagalogtaTamilzh-twTaiwaneseteTeluguthThaitrTurkishukUkrainian文档还提到新增语言可以复制 locale/en.js 为模板改写成目标语言文件仓库中he.js与iw.js并存即属此类历史命名差异。配置示例lang: fr即切换到法语界面。4.3start_at_end从最新日期开始设为true时时间线初始定位到最后一个日期。默认值为false对应源码 VMM.Timeline.js 中的start_at_end: false加载时若该值为真且当前幻灯片仍为第 0 张则自动跳转到末尾VMM.Timeline.js。4.4start_at_slide指定起始幻灯片指定初始显示的幻灯片编号。默认值为0从第 0 张开始即第一张。源码在加载阶段会判断parseInt(config.start_at_slide) 0时才把current_slide改写为指定值VMM.Timeline.js所以默认 0 意味着不做跳转。4.5start_zoom_adjust起始缩放微调相当于在初始状态下按指定次数点击时间轴的放大/缩小按钮正数放大、负数缩小。默认值为0源码中通过config.nav.zoom.adjust parseInt(config.start_zoom_adjust, 10)注入导航缩放逻辑VMM.Timeline.js。4.6hash_bookmark地址栏 Hash 书签设为true后允许用地址栏 hash 为幻灯片做书签便于分享定位到特定时间点。默认值为falseVMM.Timeline.js启用后源码会在初始化VMM.Timeline.js与加载VMM.Timeline.js两处处理 hash 读写。4.7debug调试日志设为true时向浏览器控制台输出事件等调试信息。默认值为false。4.8gmap_key与maptype地图样式由于 Google Maps API 的改动使用自定义地图类型时需要先提供 Google API Key即gmap_key。源码中gmap_key默认值为空字符串VMM.Timeline.js当它非空时会被写入config.api_keys.googleVMM.Timeline.js并在渲染地图时通过VMM.ExternalAPI.googlemaps.setMapType(config.maptype)应用所选样式VMM.Timeline.js。maptype可取值Stamen Mapstoner、toner-lines、toner-labels、watercolor、sterrainGoogle MapsROADMAP、TERRAIN、HYBRID、SATELLITEOpenStreetMaposm。4.9font字体组合时间线标题与正文使用成对组合的 web 字体font直接取组合名。仓库 source/less/Core/Font/ 下每个.less文件对应一组预设组合名字体组合名字体AbrilFatface-AverageAbril Fatface AverageArvo-PTSansArvo PT SansBevan-PotanoSansBevan Potano SansBreeSerif-OpenSansBree Serif Open SansDroidSerif-DroidSansDroid Serif Droid SansGeorgia-HelveticaGeorgia Helvetica NeueLekton-MolengoLekton MolengoMerriweather-NewsCycleMerriweather News CycleNewsCycle-MerriweatherNews Cycle MerriweatherNixieOne-LedgerNixie One LedgerPacifico-ArimoPacifico ArimoPlayfairDisplay-MuliPlayfair Display MuliPoiretOne-MolengoPoiret One MolengoPTSerif-PTSansPT Serif PT SansPTPT Sans PT Narrow PT SerifRancho-GudeaRancho GudeaSansitaOne-KameronSansita One Kameron自定义参照上述 less 自行组合文档同时提供了一份字体组合预览图仓库内对应文件为 website/static/img/make/font-options.png4.10embed_id、width、height、css、jsembed_id时间线要注入的div元素 id默认示例为timeline-embedwidth/height容器尺寸示例中常见100%/800/600等写法css/js可覆盖默认的样式表与脚本路径默认走 CDN。五、数据格式File Formats四种来源的完整模型5.1 JSON原生数据格式JSON 是 TimelineJS 的原生数据格式。文档特别提醒JSON 语法极其严格多一个逗号或少一个引号都会导致时间线加载失败。仓库 examples/model.json 提供了完整的参考模型结构如下{ timeline: { headline:The Main Timeline Headline Goes here, type:default, text:pIntro body text goes here, some HTML is ok/p, asset: { media:http://yourdomain_or_socialmedialink_goes_here.jpg, credit:Credit Name Goes Here, caption:Caption text goes here }, date: [ { startDate:2011,12,10,07,02,10, endDate:2011,12,11,08,11, headline:Headline Goes Here, text:pBody text goes here, some HTML is OK/p, tag:This is Optional, classname:optionaluniqueclassnamecanbeaddedhere, asset: { media:http://twitter.com/ArjunaSoriano/status/164181156147900416, thumbnail:optional-32x32px.jpg, credit:Credit Name Goes Here, caption:Caption text goes here } } ], era: [ { startDate:2011,12,10, endDate:2011,12,11, headline:Headline Goes Here, text:pBody text goes here, some HTML is OK/p, tag:This is Optional } ] } }模型要点顶层timeline对象包含整条时间线的headline主标题、type默认default、text引言 HTML、asset主视觉媒体、date事件数组与era时代区间数组date数组每个元素是一个事件startDate/endDate采用年,月,日,时,分,秒的逗号分隔格式如2011,12,10,07,02,10秒可省略headline、text、tag标签、classname自定义类名以及asset内含media、thumbnail、credit、captionera数组用于表示无事件的持续时代区间如历史朝代、地质年代只含日期与标题文本。仓库 examples/example_json.json 是一份更丰满的实战样例它包含 20 余个事件每个事件的asset.media直接粘贴 YouTube 视频地址如http://youtu.be/u4XpeU9erbg验证了复制浏览器地址栏的媒体 URL 即可嵌入的用法。tests/目录中的 test_extra_html.json、test_utc_firefox.json 等文件还展示了该模型在额外 HTML 片段、UTC 时区解析等场景下的扩展用法。5.2 JSONP跨域加载的变体JSONP 变体用于跨域加载数据。关键约定文件必须以.jsonp扩展名结尾且内容不再是裸 JSON而是赋值给全局变量storyjs_jsonp_data仓库 examples/model.jsonp 即为完整范例storyjs_jsonp_data { timeline: { headline:The Main Timeline Headline Goes here, type:default, text:pIntro body text goes here, some HTML is ok/p, asset: { media:http://yourdomain_or_socialmedialink_goes_here.jpg, credit:Credit Name Goes Here, caption:Caption text goes here }, date: [ { startDate:2011,12,10, endDate:2011,12,11, headline:Headline Goes Here, text:pBody text goes here, some HTML is OK/p, tag:This is Optional, classname:optionaluniqueclassnamecanbeaddedhere, asset: { media:http://twitter.com/ArjunaSoriano/status/164181156147900416, thumbnail:optional-32x32px.jpg, credit:Credit Name Goes Here, caption:Caption text goes here } } ], era: [ { startDate:2011,12,10, endDate:2011,12,11, headline:Headline Goes Here, tag:This is Optional } ] } }对照前文source的识别规则字符串以.jsonp结尾则按 JSONP 加载普通 JSON 则自动追加?callbackonJSONP_Data回调参数。因此如果你要自建跨域数据服务直接提供.jsonp文件或支持该回调名的接口即可。5.3 Google Docs用电子表格建时间线不想手工写 JSON 时可以用 Google Docs 电子表格配合 TimelineJS 官方模板制作时间线只需三步将电子表格设为公开Google Docs 默认私有必须公开。点击右上角蓝色 Share 按钮在 Share settings 窗口点击 Change...在 Visibility options 中选择 Public on the Web 并保存发布到 Web在 File 菜单选择 Publish to the Web勾选 Automatically republish when changes are made取消其余勾选项点击 start publishing得到可嵌入 HTML 的 URL复制 Web URL 填入source发布后生成的链接中选择 Web Page 选项而非 PDF、HTML、XLS 等粘贴到时间线 HTML 的source配置中。example_googlespreadsheet.html 正是该用法的落地示例其source就是一个形如https://docs.google.com/spreadsheet/pub?key...outputhtml的发布链接。启用自动重新发布后修改表格内容即可让时间线同步更新无需重新部署文件。5.4 Storify粘贴故事链接对 Storify 的支持仍处于早期阶段但可用直接把 Storify 故事链接作为source传入即可example_storify.html 中即填入了http://storify.com/zachwise/test这样的地址。六、媒体Media支持文档指出随仓库附带的 kitchen sink厨房水槽意为包罗万象示例演示了多种媒体服务的内嵌能力包括Twitter、YouTube、Flickr、Instagram、TwitPic、Wikipedia、Dailymotion、SoundCloud 和 Vimeo。使用方式极其简单把浏览器地址栏里的媒体链接直接复制到asset.media字段TimelineJS 会通过对应服务的 API 自动拉取并格式化媒体。例如 examples/example_json.json 中大量使用media: http://youtu.be/...配合credit版权署名与caption图注字段即可形成完整的媒体卡片。七、最佳实践Best practices文档给出了四条制作优质时间线的建议直接适用于本仓库的数据模型保持轻量——不要被大段文字或其他元素拖累选择强时间线叙事的故事——不适合需要来回跳跃叙述的内容把铺垫性事件也放进去——不只收录重大事件还要包含逐步累积的过程性事件不要淹没用户——包含成百上千事件的超长时间线通常不是这个格式的最佳用法。八、关于本仓库版本状态的说明需要提醒读者根据仓库根目录 README.markdown 的说明当前仓库这一版 TimelineJS 已停止开发GitHub issues 与 pull requests 已被禁用Knight Lab 的新版 TimelineJS3 使用新的 JSON 格式与旧版 TimelineJS JSON 文件不兼容旧版 Google Spreadsheet 数据仍可继续使用且不存在直接的转换工具需要手动或编程方式转换。本仓库版本仍由 Knight Lab CDN 继续提供timeline-min.js、timeline.js与timeline.css的服务但不再有后续功能开发。因此本文所述配置与数据格式均以本仓库源码及 examples/ 目录的实际内容为准适合作为旧版数据的维护参考与学习材料新项目建议评估新版 TimelineJS3。许可证本仓库代码以 Mozilla Public License 2.0MPL 2.0发布详见 LICENSE。赞分享前端数据可视化【免费下载链接】TimelineJSTimelineJS: A Storytelling Timeline built in JavaScript.项目地址https://gitcode.com/gh_mirrors/ti/TimelineJS点击查看免费下载相关推荐Conductor JSON Schema 数据模型详解WorkflowDef、TaskDef 与运行时实例的校验与实战指南Conductor JSON Schema 数据模型详解WorkflowDef、TaskDef 与运行时实例的校验与实战指南 导读 Conductor 是一个后端流程编排工作流自动化微服务Gorilla API Store 数据贡献指南从 JSON 格式到 APIBench/APIZoo 的数据生态实战Gorilla API Store 数据贡献指南从 JSON 格式到 APIBench/APIZoo 的数据生态实战 Gorilla 项目的核心使命是增强大语人工智能大模型模型评测工具调用AI AgentAgent 评测RAG微调DeepChem 示例实战指南用 doctest 风格示例训练 DelaneyESOL与 ChEMBL 数据集模型DeepChem 示例实战指南用 doctest 风格示例训练 DelaneyESOL与 ChEMBL 数据集模型 导读 本文以 DeepChem 仓库中人工智能深度学习机器学习生物信息学科学计算上一篇Hermes WebUI Docker部署完全指南容器化AI助手的最佳实践下一篇3步掌握Czkawka彻底解决重复文件困扰创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考