vis-timeline groups存在时左上角颜色自定义

最新推荐文章于 2024-05-13 09:51:59 发布
最新推荐文章于 2024-05-13 09:51:59 发布
阅读量160 收藏 1
点赞数
分类专栏： vim-timeline 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37732512/article/details/133708919
版权

在使用vis时，碰到一个需求，需要将时间轴颜色设置为自定义颜色，如下图红色框

API中找了一下，可以通过.vis-background设置背景颜色

好像是不能满足需求，继续找，时间轴在上方，vis-top设置完

嗯。。。有一半满足需求了，剩下的怎么办？

好吧，翻源码吧 node_modules/vis-timeline/peer/esm/vis-timeline-graph2d.js

找到构造函数Timeline定义

function Timeline(container, items, groups, options) {
    ...
    // Create the DOM, props, and emitter
    _this._create(container);
    ...
}
/**
 * Create a timeline visualization
 * @constructor Core
 */
 var Core = /*#__PURE__*/function () {
    function Core() {
      _classCallCheck(this, Core);
    }
    _createClass(Core, [{
      key: "_create",
      value:
      /**
       * Create the main DOM for the Core: a root panel containing left, right,
       * top, bottom, content, and background panel.
       * @param {Element} container  The container element where the Core will
       *                             be attached.
       * @protected
       */
      function _create(container) {
        var _this = this,
          _context,
          _context2,
          _context3;
        this.dom = {};
        this.dom.container = container;
        this.dom.container.style.position = 'relative';
        this.dom.root = document.createElement('div');
        this.dom.background = document.createElement('div');
        this.dom.backgroundVertical = document.createElement('div');
        this.dom.backgroundHorizontal = document.createElement('div');
        this.dom.centerContainer = document.createElement('div');
        this.dom.leftContainer = document.createElement('div');
        this.dom.rightContainer = document.createElement('div');
        this.dom.center = document.createElement('div');
        this.dom.left = document.createElement('div');
        this.dom.right = document.createElement('div');
        this.dom.top = document.createElement('div');
        this.dom.bottom = document.createElement('div');
        this.dom.shadowTop = document.createElement('div');
        this.dom.shadowBottom = document.createElement('div');
        this.dom.shadowTopLeft = document.createElement('div');
        this.dom.shadowBottomLeft = document.createElement('div');
        this.dom.shadowTopRight = document.createElement('div');
        this.dom.shadowBottomRight = document.createElement('div');
        this.dom.rollingModeBtn = document.createElement('div');
        this.dom.loadingScreen = document.createElement('div');
        this.dom.root.className = 'vis-timeline';
        this.dom.background.className = 'vis-panel vis-background';
        this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical';
        this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
        this.dom.centerContainer.className = 'vis-panel vis-center';
        this.dom.leftContainer.className = 'vis-panel vis-left';
        this.dom.rightContainer.className = 'vis-panel vis-right';
        this.dom.top.className = 'vis-panel vis-top';
        this.dom.bottom.className = 'vis-panel vis-bottom';
        this.dom.left.className = 'vis-content';
        this.dom.center.className = 'vis-content';
        this.dom.right.className = 'vis-content';
        this.dom.shadowTop.className = 'vis-shadow vis-top';
        this.dom.shadowBottom.className = 'vis-shadow vis-bottom';
        this.dom.shadowTopLeft.className = 'vis-shadow vis-top';
        this.dom.shadowBottomLeft.className = 'vis-shadow vis-bottom';
        this.dom.shadowTopRight.className = 'vis-shadow vis-top';
        this.dom.shadowBottomRight.className = 'vis-shadow vis-bottom';
        this.dom.rollingModeBtn.className = 'vis-rolling-mode-btn';
        this.dom.loadingScreen.className = 'vis-loading-screen';
        this.dom.root.appendChild(this.dom.background);
        this.dom.root.appendChild(this.dom.backgroundVertical);
        this.dom.root.appendChild(this.dom.backgroundHorizontal);
        this.dom.root.appendChild(this.dom.centerContainer);
        this.dom.root.appendChild(this.dom.leftContainer);
        this.dom.root.appendChild(this.dom.rightContainer);
        this.dom.root.appendChild(this.dom.top);
        this.dom.root.appendChild(this.dom.bottom);
        this.dom.root.appendChild(this.dom.rollingModeBtn);
        this.dom.centerContainer.appendChild(this.dom.center);
        this.dom.leftContainer.appendChild(this.dom.left);
        this.dom.rightContainer.appendChild(this.dom.right);
        this.dom.centerContainer.appendChild(this.dom.shadowTop);
        this.dom.centerContainer.appendChild(this.dom.shadowBottom);
        this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
        this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
        this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
        this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
  
        // size properties of each of the panels
        this.props = {
          root: {},
          background: {},
          centerContainer: {},
          leftContainer: {},
          rightContainer: {},
          center: {},
          left: {},
          right: {},
          top: {},
          bottom: {},
          border: {},
          scrollTop: 0,
          scrollTopMin: 0
        };
        ...
        
      }
    },...{
      key: "redraw",
      value: function redraw() {
        this._redraw();
      }
  
      /**
       * Redraw for internal use. Redraws all components. See also the public
       * method redraw.
       * @protected
       */
    }, {
      key: "_redraw",
      value: function _redraw() {
        var _context20;
        this.redrawCount++;
        var dom = this.dom;
        if (!dom || !dom.container || dom.root.offsetWidth == 0) return; // when destroyed, or invisible
  
        var resized = false;
        var options = this.options;
        var props = this.props;
        updateHiddenDates(this.options.moment, this.body, this.options.hiddenDates);
  
        // update class names
        if (options.orientation == 'top') {
          availableUtils.addClassName(dom.root, 'vis-top');
          availableUtils.removeClassName(dom.root, 'vis-bottom');
        } else {
          availableUtils.removeClassName(dom.root, 'vis-top');
          availableUtils.addClassName(dom.root, 'vis-bottom');
        }
        if (options.rtl) {
          availableUtils.addClassName(dom.root, 'vis-rtl');
          availableUtils.removeClassName(dom.root, 'vis-ltr');
        } else {
          availableUtils.addClassName(dom.root, 'vis-ltr');
          availableUtils.removeClassName(dom.root, 'vis-rtl');
        }
  
        // update root width and height options
        dom.root.style.maxHeight = availableUtils.option.asSize(options.maxHeight, '');
        dom.root.style.minHeight = availableUtils.option.asSize(options.minHeight, '');
        dom.root.style.width = availableUtils.option.asSize(options.width, '');
        var rootOffsetWidth = dom.root.offsetWidth;
  
        // calculate border widths
        props.border.left = 1;
        props.border.right = 1;
        props.border.top = 1;
        props.border.bottom = 1;
  
        // calculate the heights. If any of the side panels is empty, we set the height to
        // minus the border width, such that the border will be invisible
        props.center.height = dom.center.offsetHeight;
        props.left.height = dom.left.offsetHeight;
        props.right.height = dom.right.offsetHeight;
        props.top.height = dom.top.clientHeight || -props.border.top;
        props.bottom.height = Math.round(dom.bottom.getBoundingClientRect().height) || dom.bottom.clientHeight || -props.border.bottom;
  
        // TODO: compensate borders when any of the panels is empty.
  
        // apply auto height
        // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
        var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
        var autoHeight = props.top.height + contentHeight + props.bottom.height + props.border.top + props.border.bottom;
        dom.root.style.height = availableUtils.option.asSize(options.height, "".concat(autoHeight, "px"));
  
        // calculate heights of the content panels
        props.root.height = dom.root.offsetHeight;
        props.background.height = props.root.height;
        var containerHeight = props.root.height - props.top.height - props.bottom.height;
        props.centerContainer.height = containerHeight;
        props.leftContainer.height = containerHeight;
        props.rightContainer.height = props.leftContainer.height;
  
        // calculate the widths of the panels
        props.root.width = rootOffsetWidth;
        props.background.width = props.root.width;
        if (!this.initialDrawDone) {
          props.scrollbarWidth = availableUtils.getScrollBarWidth();
        }
        var leftContainerClientWidth = dom.leftContainer.clientWidth;
        var rightContainerClientWidth = dom.rightContainer.clientWidth;
        if (options.verticalScroll) {
          if (options.rtl) {
            props.left.width = leftContainerClientWidth || -props.border.left;
            props.right.width = rightContainerClientWidth + props.scrollbarWidth || -props.border.right;
          } else {
            props.left.width = leftContainerClientWidth + props.scrollbarWidth || -props.border.left;
            props.right.width = rightContainerClientWidth || -props.border.right;
          }
        } else {
          props.left.width = leftContainerClientWidth || -props.border.left;
          props.right.width = rightContainerClientWidth || -props.border.right;
        }
        this._setDOM();
  
        // update the scrollTop, feasible range for the offset can be changed
        // when the height of the Core or of the contents of the center changed
        var offset = this._updateScrollTop();
  
        // reposition the scrollable contents
        if (options.orientation.item != 'top') {
          offset += Math.max(props.centerContainer.height - props.center.height - props.border.top - props.border.bottom, 0);
        }
        dom.center.style.transform = "translateY(".concat(offset, "px)");
  
        // show shadows when vertical scrolling is available
        var visibilityTop = props.scrollTop == 0 ? 'hidden' : '';
        var visibilityBottom = props.scrollTop == props.scrollTopMin ? 'hidden' : '';
        dom.shadowTop.style.visibility = visibilityTop;
        dom.shadowBottom.style.visibility = visibilityBottom;
        dom.shadowTopLeft.style.visibility = visibilityTop;
        dom.shadowBottomLeft.style.visibility = visibilityBottom;
        dom.shadowTopRight.style.visibility = visibilityTop;
        dom.shadowBottomRight.style.visibility = visibilityBottom;
        if (options.verticalScroll) {
          dom.rightContainer.className = 'vis-panel vis-right vis-vertical-scroll';
          dom.leftContainer.className = 'vis-panel vis-left vis-vertical-scroll';
          dom.shadowTopRight.style.visibility = "hidden";
          dom.shadowBottomRight.style.visibility = "hidden";
          dom.shadowTopLeft.style.visibility = "hidden";
          dom.shadowBottomLeft.style.visibility = "hidden";
          dom.left.style.top = '0px';
          dom.right.style.top = '0px';
        }
        if (!options.verticalScroll || props.center.height < props.centerContainer.height) {
          dom.left.style.top = "".concat(offset, "px");
          dom.right.style.top = "".concat(offset, "px");
          dom.rightContainer.className = dom.rightContainer.className.replace(new RegExp('(?:^|\\s)' + 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
          dom.leftContainer.className = dom.leftContainer.className.replace(new RegExp('(?:^|\\s)' + 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
          props.left.width = leftContainerClientWidth || -props.border.left;
          props.right.width = rightContainerClientWidth || -props.border.right;
          this._setDOM();
        }
  
        // enable/disable vertical panning
        var contentsOverflow = props.center.height > props.centerContainer.height;
        this.hammer.get('pan').set({
          direction: contentsOverflow ? Hammer.DIRECTION_ALL : Hammer.DIRECTION_HORIZONTAL
        });
  
        // set the long press time
        this.hammer.get('press').set({
          time: this.options.longSelectPressTime
        });
  
        // redraw all components
        _forEachInstanceProperty(_context20 = this.components).call(_context20, function (component) {
          resized = component.redraw() || resized;
        });
        var MAX_REDRAW = 5;
        if (resized) {
          if (this.redrawCount < MAX_REDRAW) {
            this.body.emitter.emit('_change');
            return;
          } else {
            console.log('WARNING: infinite loop in redraw?');
          }
        } else {
          this.redrawCount = 0;
        }
  
        //Emit public 'changed' event for UI updates, see issue #1592
        this.body.emitter.emit("changed");
      }
  
      /**
       * sets the basic DOM components needed for the timeline\graph2d
       */
    }, {
      key: "_setDOM",
      value: function _setDOM() {
        var props = this.props;
        var dom = this.dom;
        props.leftContainer.width = props.left.width;
        props.rightContainer.width = props.right.width;
        var centerWidth = props.root.width - props.left.width - props.right.width;
        props.center.width = centerWidth;
        props.centerContainer.width = centerWidth;
        props.top.width = centerWidth;
        props.bottom.width = centerWidth;
  
        // resize the panels
        dom.background.style.height = "".concat(props.background.height, "px");
        dom.backgroundVertical.style.height = "".concat(props.background.height, "px");
        dom.backgroundHorizontal.style.height = "".concat(props.centerContainer.height, "px");
        dom.centerContainer.style.height = "".concat(props.centerContainer.height, "px");
        dom.leftContainer.style.height = "".concat(props.leftContainer.height, "px");
        dom.rightContainer.style.height = "".concat(props.rightContainer.height, "px");
        dom.background.style.width = "".concat(props.background.width, "px");
        dom.backgroundVertical.style.width = "".concat(props.centerContainer.width, "px");
        dom.backgroundHorizontal.style.width = "".concat(props.background.width, "px");
        dom.centerContainer.style.width = "".concat(props.center.width, "px");
        dom.top.style.width = "".concat(props.top.width, "px");
        dom.bottom.style.width = "".concat(props.bottom.width, "px");
  
        // reposition the panels
        dom.background.style.left = '0';
        dom.background.style.top = '0';
        dom.backgroundVertical.style.left = "".concat(props.left.width + props.border.left, "px");
        dom.backgroundVertical.style.top = '0';
        dom.backgroundHorizontal.style.left = '0';
        dom.backgroundHorizontal.style.top = "".concat(props.top.height, "px");
        dom.centerContainer.style.left = "".concat(props.left.width, "px");
        dom.centerContainer.style.top = "".concat(props.top.height, "px");
        dom.leftContainer.style.left = '0';
        dom.leftContainer.style.top = "".concat(props.top.height, "px");
        dom.rightContainer.style.left = "".concat(props.left.width + props.center.width, "px");
        dom.rightContainer.style.top = "".concat(props.top.height, "px");
        dom.top.style.left = "".concat(props.left.width, "px");
        dom.top.style.top = '0';
        dom.bottom.style.left = "".concat(props.left.width, "px");
        dom.bottom.style.top = "".concat(props.top.height + props.centerContainer.height, "px");
        dom.center.style.left = '0';
        dom.left.style.left = '0';
        dom.right.style.left = '0';
      }
  
      /**
       * Set a current time. This can be used for example to ensure that a client's
       * time is synchronized with a shared server time.
       * Only applicable when option `showCurrentTime` is true.
       * @param {Date | string | number} time     A Date, unix timestamp, or
       *                                          ISO date string.
       */
    }]);
    return Core;
  }(); // turn Core into an event emitter

查看源码可知，先new Timeline，然后setOptions，setData，最后在创建dom、props、emitter。

这下思路就来了，先创建一个root下的子元素div，

const customLeft = document.createElement("div");

绑定到root元素下，添加自定义样式

timeline.dom.root.appendChild(customLeft);
customLeft.className = "vis-custom vis-left-top";

高度自行设置，此时宽度想要跟groups保持一致，查看源码得知，props中left的width为groups宽度

customLeft.style.width = timeline.props.left.width + "px";

如此，得到动态宽度（红色区域为自定义颜色）

完整代码

const container = document.getElementById("visualization");
const customLeft = document.createElement("div");
timeline = new Timeline(container);
timeline.setOptions({ ...options, ...times.value });
timeline.setData({ groups: groups.value, items: items.value });
timeline.dom.root.appendChild(customLeft);
customLeft.className = "vis-custom vis-left-top";
customLeft.style.width = timeline.props.left.width + "px";
timeline.on("doubleClick", timelineDoubleClick);

我是小菜鸟*
关注
专栏目录
【JS】vis.js使用之vis-timeline使用攻略，vis-timeline在vue3中实现时间轴、甘特图
余浩的博客
04-18 7998
`vis-timeline`时间轴是一个交互式可视化图表，用于实时可视化时间数据。数据项可以只与某个时间点关联，也可以有开始和结束日期（即一个时间范围）。vis-timeline可以通过拖拽和滚动时间轴自由移动和缩放。可以在时间轴中创建、编辑和删除数据项目。轴上的时间尺度是自动调整的，支持从毫秒到年的尺度。 vis-time时间轴使用常规`HTML DOM`呈现时间轴和放在时间轴上的项目，这样的好处就是可以使用自定义css样式进行灵活定制。
使用vis-timeline绘制甘特图并实现时间轴的中文化
weixin_39893889的博客
04-26 2059
使用vis-timeline绘制甘特图并实现时间轴的中文化 最终实现效果 安装vis-timeline及相关依赖包 cnpm install -S vis-linetime cnpm install -S vis-data cnpm install -S moment 组件中引入使用 // 国际化时间轴时必选在先引入moment在引入vis相关依赖包 const moment = require('moment') import { DataSet } from 'vis-data/peer' imp
vue3 vis-timeline
qq_40734853的博客
09-09 993
new DataSet([数据])----渲染数据。
vis-timeline：时间轴的动态可视化神器
最新发布
gitblog_00052的博客
05-13 1133
vis-timeline：时间轴的动态可视化神器 项目地址:https://gitcode.com/visjs/vis-timeline vis-timeline 是一款强大的开源图表库，用于在时间轴上展示数据的动态交互视图。无论是单个日期事件，还是具有起始和结束日期的时间段，都可以在这条时间线上流畅地展现。用户可以自由移动和缩放时间线，甚至创建、编辑和删除时间线上的元素。时间轴的尺度会自动调整...
vis-timeline时间线
weixin_46306370的博客
06-29 1820
项目里需要时间线展示 发现vis的timeline满足需求便下载了vis 但是在项目里使用的时候数据没有渲染出来，也没有报错 刚开始写的代码 <template> <div> <div id="visualization"></div> </div> </template> <script> import vis from"vis"; export default { methods:{ init(){
react-visjs-timeline, vis.js 时间轴模块的响应组件.zip
09-17
react-visjs-timeline, vis.js 时间轴模块的响应组件 响应 Vis.js-时间轴Vis.js 时间轴模块的响应组件。Vis.js 时间轴文档安装npm install --save visnpm install --save react-visjs-timeline
vis-react:基于vis.js的数据可视化库
05-30
渲染的图形是可滚动、可缩放、视网膜就绪、动态的，并在双击时切换布局。 由于 vis.js 的命令性质，更新图形属性会导致图形的完全重绘并将其完全移植到 React 本身就是一个大项目！ 该组件将三个 vis.js 配置对象...
vis-timeline7.4.6
12-20
vis-timeline7.4.6
angular-gantt-schedule-timeline-calendar:gantt-schedule-timeline-calendar的角度版本[角度甘特图，甘特图，角度甘特图，角度时间表，角度时间线，角度日历，甘特图，时间表，计划程序，时间轴，日历]
03-10
9. **定制化**：根据需求，用户可能需要自定义组件的颜色、样式、行为，以适应其特定的品牌或用户体验要求。 10. **API 和事件**：组件通常会提供一系列 API 和事件，以便开发者能够控制和响应用户交互，如添加、...
timeline-arrows:用于轻松绘制线以连接vis时间线模块中的项目的类。 在这里查看示例
05-01
npm install timeline-arrows 2-在项目中从arrow.js导入Arrow类 3-像往常一样创建时间轴（请参阅 ）。 例如： const my_timeline = new vis.Timeline(container, items, groups, options); 4-将箭头创建为对象数组...
vistime：漂亮的时间表
02-19
vistime-R中的漂亮时间表 用于创建基于时间的图表（如甘特图或时间轴）的库。 可能的输出包括ggplot ， plotly图， Highchart或data.frame 。 可以在RStudio查看器窗格，R Markdown文档或Shiny应用程序中使用结果。 在vistime()和hc_vistime()创建的交互式输出中，您可以使用鼠标悬停或缩放与图进行交互。 随后可以使用ggplot::theme() ， plotly_build或hc_*函数（分别用于gg_vistime ， vistime或hc_vistime ）来操纵时间轴及其组成部分。 选择data.frame输出时，可以使用自己的绘图引擎来可视化图形。 如果您发现vistime有用，请考虑支持其开发： 欢迎反馈： 目录 1.主要功能 vistime软件包提供了三个主要功能： 1） vistime()产生交互
vis-timeline::chart_increasing:创建带有项目和范围的完全可定制的交互式时间轴和2D图形
03-13
可见时间线 时间线/ Graph2D是一个交互式可视化图表，可实时可视化数据。 数据项可以在单个日期发生，也可以有开始和结束日期（范围）。 您可以通过在时间轴中拖动和滚动来自由移动和缩放时间轴。 可以在时间轴中创建，编辑和删除项目。 轴上的时间刻度是自动调整的，并且支持的刻度范围从毫秒到年。 徽章 安装 通过npm安装： $ npm install vis-timeline 例子 下面显示了有关加载时间轴的基本示例。 在项目的中可以找到更多示例。 <!doctype html > < html > < head > < title > Timeline </ title > < script type =" text/javascript " src =" //unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-
Timeline 开源时间轴应用
10-28
我们从这个名称就能看出，它与Facebook的Timeline功能大概也脱不了干系。只是此处的Timeline可以包括进更多的信息，包括来自Twitter、YouTube、Flickr、Vimeo、Google Maps和SoundCloud等网站的内容。 开发者计划让Timeline支持更多的媒体类型，并对iPhone提供兼容性支持。同时准备将"公元前"添加至时间轴，以及对秒和毫秒提供更好的支持。与Storify不同的是，用户可以通过JSON将代码嵌入任何页面，也可以将其保存为Google Docs。 Timeline基于JavaScript和HTML/HTML5开发，并且作为开源项目放在GitHub，方便使用和学习。
jQuery刻度尺风格横向时间轴插件timeline
06-10
timeline是一款效果类似时间刻度尺风格的jQuery横向时间轴插件网页时间轴特效代码。
vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化
林啾啾的博客
02-13 3701
vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化，并实现原始图、撤销功能
vue3使用vis.js插件中的vis-timeline时间轴
weixin_48986312的博客
11-09 934
vue3使用vis-timeline任务执行时间轴
使用vis绘制堆叠折线图并添加自定义时间，可随时间变化进行移动以及自定义图例功能
weixin_39893889的博客
05-16 725
使用vis绘制堆叠折线图 最终实现效果 安装相关依赖包 cnpm install -S vis-linetime cnpm install -S vis-data cnpm install -S moment 组件中引入使用 const moment = require('moment') import { DataSet } from 'vis-data/peer' import { Graph2d } from 'vis-timeline/peer' import 'vis-timeline/st
Vue时间轴
我是我家小女孩
05-31 985
原型图 数据结构 JZQK 是原型图中的 起始 xxxx-xx-xx DATAS 是蓝色进展情况 以下代码语法不严谨 把class写成ColorValue={}，是因为点击的时候，需要改变当前的颜色。 当点击进度块查看信息的时候，改变当前块的颜色， ...
Visjs一款开源可视化库
m0_62684754的博客
11-05 785
时间轴组件
引入vis-timeline
05-05
如果你想在你的网站或应用程序中展示时间轴，可以使用vis-timeline。vis-timeline是一个用JavaScript编写的开源库，允许你创建可交互的时间轴，并在上面显示事件或数据。它支持平移、缩放和导航，可以用于展示历史事件、项目进度、日程安排等等。 要引入vis-timeline，可以按照以下步骤进行操作： 1. 下载vis-timeline。你可以从其官方网站https://visjs.github.io/vis-timeline/docs/vis-timeline/下载vis-timeline的最新版本，也可以使用npm或yarn安装它，命令如下： ```bash npm install vis-timeline ``` 或 ```bash yarn add vis-timeline ``` 2. 引入vis-timeline的CSS和JavaScript文件。你可以在HTML文档中使用以下代码引入它们： ```html <link href="https://unpkg.com/vis-timeline/standalone/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="https://unpkg.com/vis-timeline/standalone/vis-timeline-graph2d.min.js"></script> ``` 3. 创建一个包含容器元素的div。vis-timeline需要一个容器元素来呈现时间轴。你可以在HTML文档中创建一个div元素，并为它设置一个唯一的ID。例如： ```html <div id="timeline"></div> ``` 4. 初始化vis-timeline。在JavaScript中，你需要使用以下代码初始化vis-timeline： ```javascript var container = document.getElementById('timeline'); var options = {}; // 选项可以根据需要进行配置 var timeline = new vis.Timeline(container, items, options); ``` 其中，container是你在步骤3中创建的div元素，items是一个包含事件或数据的数组，options是一个包含配置选项的对象。 5. 在items数组中添加事件或数据。在vis-timeline中，你需要使用一个包含事件或数据的数组来初始化时间轴。每个事件或数据都应该是一个对象，至少包含start属性，表示事件或数据的开始时间。例如： ```javascript var items = [ {id: 1, content: '事件1', start: '2022-01-01'}, {id: 2, content: '事件2', start: '2022-01-02', end: '2022-01-05'}, {id: 3, content: '事件3', start: '2022-01-06', type: 'point'} ]; ``` 其中，id是事件或数据的唯一标识符，content是事件或数据的显示文本，start是事件或数据的开始时间，end是事件或数据的结束时间（可选），type是事件或数据的类型（可选）。 这样，你就可以使用vis-timeline创建一个基本的时间轴了。如果需要更高级的功能，可以查看vis-timeline的文档，了解更多选项和方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值