【JS】vis.js使用之vis-timeline使用攻略，vis-timeline在vue3中实现时间轴、甘特图

vis.js是一个基于浏览器的可视化库，它提供了多个组件，包括DataSet, Timeline, Network, Graph2d和Graph3d。该库具有易用性、能够处理大量动态数据和允许数据操作和交互的特点。

1、vis-timeline简介

vis-timeline时间轴是一个交互式可视化图表，用于实时可视化时间数据。数据项可以只与某个时间点关联，也可以有开始和结束日期（即一个时间范围）。vis-timeline可以通过拖拽和滚动时间轴自由移动和缩放。可以在时间轴中创建、编辑和删除数据项目。轴上的时间尺度是自动调整的，支持从毫秒到年的尺度。

vis-time时间轴使用常规HTML DOM呈现时间轴和放在时间轴上的项目，这样的好处就是可以使用自定义css样式进行灵活定制。

Timeline	地址
vis.js官网	https://visjs.org/
vis-timeline官方英文文档	https://visjs.github.io/vis-timeline/docs/timeline/
vis-timeline官方示例	https://visjs.github.io/vis-timeline/examples/timeline/
vis-timeline的github源码	https://github.com/visjs/vis-timeline

可实现效果如下：纵向可以分组，横向可以是时间轴，每个item项目可以自定义内容与样式。

2、安装插件及依赖

// vis-timeline包
cnpm install -S vis-timeline// vis.js提供的可以实现数据双向绑定的包
cnpm install -S vis-data// 实现时间轴中文的moment.js库的包
cnpm install -S moment

3、简单示例

<template><div class="bindNurseToRoom-container"><!-- 时间轴-绑定元素 --><div ref="timelineRef" id="timeline" class="bindNurseToRoom-container"></div></div>
</template><script setup lang="ts" name="bindNurseToRoom">
import { onMounted, ref, watch, nextTick, reactive, defineAsyncComponent } from 'vue';
import "vis-timeline/styles/vis-timeline-graph2d.min.css";
import { DataSet } from 'vis-data'; // 为timeline提供双向数据绑定，加快渲染速度
import { Timeline } from "vis-timeline"; //standalone,peer不同的包装方式
import moment from 'moment';
import  "moment/dist/locale/zh-cn.js";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useOperatingRoomApi } from '/@/api/room/operatingRoom';
import { useOperationScheduleStore } from '/@/stores/operationScheduleStore';
const _useOperationScheduleStore = useOperationScheduleStore();// 引入组件
const BindNurseToRoomDialog = defineAsyncComponent(() => import('./bindNurseToRoomDialog.vue'));const timelineRef = ref(null);
const bindDialogRef = ref();
// 定义父组件传过来的值
const props = defineProps({// 当前操作时间operateTime: {type: String,default: () => '',},// 配置项config: {type: Object,default: () => {},},
});
const curOperateTime = ref(''); // 当前操作日期格式化的字符串 或 undefined 或 ""let dataList:any = new DataSet([// {//   id: 1,//   content: "手术1",//   start: "2023-04-07 08:00",//   end: "2023-04-07 10:00",//   group: "5a92fde514c2c842f680885b1d31b9b8",//   style: "color: white; background-color: #1abc9c;",//   idCard: "123456",//   patientName: "李秀莲",//   doctorName: "李莲",//   anaesthesiaType: "局部",// },// {//   id: 2,//   content: "手术2",//   start: "2023-04-06 10:00",//   end: "2023-04-06 12:00",//   group: "手术室1",//   style: "color: white; background-color: #2ecc71;",//   idCard: "12346",//   patientName: "李秀",//   doctorName: "李莲",//   anaesthesiaType: "局部",// },// {//   id: 3,//   content: "手术3",//   start: "2023-04-06 08:30",//   end: "2023-04-06 09:30",//   group: "手术室2",//   style: "color: white; background-color: #3498db;",//   idCard: "1456",//   patientName: "莲",//   doctorName: "李",//   anaesthesiaType: "局部",// },// {//   id: 4,//   content: `<div style="display:block;height:100px;background:red;">//       123123123213//       </div> `, //content接收字符串类型的文本或html//   start: "2023-04-06 11:00",//   end: "2023-04-06 14:00",//   group: "手术室2",//   style: "color: white; background-color: #9b59b6;",//   idCard: "1236",//   patientName: "李的",//   doctorName: "李莲时",//   anaesthesiaType: "局部",// },// {//   id: 5,//   content: `<div style="display:block;height:100px;background:red;">手术5</div> `,//   start: "2023-04-06 06:30",//   end: "2023-04-06 10:10",//   group: "手术室5",//   className:'icu',//   editable: false, // 给某个特定的设置为不可编辑//   idCard: "156",//   patientName: "李秀消",//   doctorName: "李莲",//   anaesthesiaType: "局部",// },
]);const state:any = reactive({groups: null, // 手术室分组-new DataSet()格式的数据集timeline: null, // 手术室当前排班时间轴-new DataSet()格式的数据集
});// 监听当前操作日期变化
watch(() => props.operateTime,(newValue: any) => {if (newValue) {curOperateTime.value = newValue; // 保存当前操作日期到变量中，以便以后使用。nextTick(async () => {if(state.timeline){// state.timeline.setItems([], { clearNetwork: false });// state.timeline.destroy(); // 销毁时间轴} await getOperationRoom();await renderTimeLine(); // 渲染时间轴state.timeline.redraw();});}},{ immediate : true } //在组件初次加载的时候执行
);onMounted(async () => {state.timeline = new Timeline(timelineRef.value as unknown as HTMLElement, //document.getElementById("timeline") as HTMLElement, dataList, {locale: 'zh-cn', //moment.locale('zh-cn'), // 时间轴国际化editable: {add: true,         // 双击添加新项-add new items by double tappingupdateTime: true,  // 水平拖拉项目-drag items horizontallyupdateGroup: true, // 从一个分组拖拽到另一个分组-drag items from one group to anotherremove: true,       // 通过右上角按钮删除项目-delete an item by tapping the delete button top right// overrideItems: false  // allow these options to override item.editable},selectable: true,// height: '730px', // 时间轴高度minHeight: 400, // timeline表格的最小高度maxHeight: 750, // timeline表格的最大高度groupHeightMode: 'fixed', // 指定分组高度: 自动auto, fixed固定, fitItems适应项目stack: false, // ture则不重叠verticalScroll: true, // 竖向滚动orientation: 'top', // 时间轴位置showCurrentTime: true, // 显示当前时间zoomKey: "ctrlKey", // 缩放按键zoomMax: 1000 * 60 * 60 * 24,zoomMin: 1000 * 60 * 30,moment: function(date:any) {return moment(date).locale('zh-cn'); //vis.moment(date).utcOffset('+08:00');},// 显式将此选项设置为true以完全禁用Timeline的XSS保护xss: {disabled: true,},//可以提供模板处理程序。(或许可以直接放插槽？待测试)//此处理程序是一个函数，接受项的数据作为第一个参数，项元素作为第二个参数，编辑后的数据作为第三个参数，并输出格式化的HTML：template: function (sourceData:any, targetElement:any, parsedData:any) {console.log('parsedData: ', parsedData);targetElement.className = 'custom-item-template-class'; // 将自定义class写在className属性中return `<div class="custom-item ${sourceData.customClassName}"><div class="top"><span>${moment(sourceData.start).format('YYYY-MM-DD HH:mm:ss').split(' ')[1]}-${moment(sourceData.end).format('YYYY-MM-DD HH:mm:ss').split(' ')[1]}</span> <span>${sourceData.doctorName}</span></div><div class="center-box"><div class="info"><span>${sourceData.patientName}</span> &nbsp;<span>${sourceData.idCard}</span> &nbsp;<span>${sourceData.sex?'男':'女'}</span> &nbsp;<span>${sourceData.age}岁</span></div><h3>${sourceData.content}</h3></div><div class="nurse-box"><span>${ sourceData?.selectedNurse?.xshs1.name ? sourceData.selectedNurse.xshs1.name :'---' }</span><span>${ sourceData?.selectedNurse?.xhhs1.name ? sourceData.selectedNurse.xhhs1.name :'---' }</span></div><div class="bottom-box"><h4>${sourceData.anaesthesiaType}</h4></div></div>`;},tooltip: {followMouse: false,template: (originalItemData:any, parsedItemData:any) => {console.log('hover-parsedItemData: ', parsedItemData);return `<div><p><span>开始时间：</span><span>${moment(originalItemData.start).format('YYYY-MM-DD HH:mm:ss')}</span></p><p><span>结束时间：</span><span>${moment(originalItemData.end).format('YYYY-MM-DD HH:mm:ss')}</span></p><p><span>手术内容：</span><span>${originalItemData.content}</span></p></div>`}},// onAdd(item, callback)在将要添加新项时触发。如果未实现，将使用默认文本内容添加该项。onAdd: (originalItemData:any, callback:any) => {debuggerconsole.log('新增originalItemData: ', originalItemData);if (originalItemData.id) {originalItemData.customClassName = 'un-submit'; // 未提交状态的样式callback(originalItemData); // 成功返回 这行相当于调用了dataList.add(originalItemData)}else {callback(null); // 失败取消}},// onDropObjectOnItem(objectData,Item)在将对象放入现有时间轴项时触发。// 当拖动数据中包含target:'item'的对象被放入时间轴项时触发回调函数。onDropObjectOnItem: function (objectData:any, item:any) {debuggerif (!item) {ElMessage({message: '请拖动护士到对应的手术项目中',type: 'warning'})return;}onDropToItem(objectData, item);},// onUpdate（item，callback）在项目即将更新时触发(双击item时)。此函数通常会显示用户更改项目的对话框。如果不执行，什么都不会发生。// 示例：https://visjs.github.io/vis-timeline/examples/timeline/editing/editingItemsCallbacks.htmlonUpdate: function (item:any, callback:any) {if (item.id) {callback(item); // send back adjusted itembindDialogRef.value.openDialog(item); // 打开弹窗}else {callback(null); // cancel updating the item}},// 当项目被移动时重复触发的回调函数。仅在selectable和editable.updateTime或editable.updateGroup选项都设置为true时才适用onMoving: function (item:any, callback:any) {console.log('item: ', item);item.moving = true;callback(item);},// 当项目即将被删除时触发onRemove(item, callback)。如果未实现，该项将始终被删除。onRemove: (item:any, callback:Function) => {onDeleteByItemType(item,callback);},});
});// 获取医院手术室信息
const getOperationRoom = async () => {let { data } = await useOperatingRoomApi().selectAdministrativeOffice();if(data.length){let temp = data.map((item:any) => {return {...item,content: item.administrativeOfficeCard,style: "color: #fff; background: #5E8DFF;",}}).sort((a:any, b:any) => {return a.content - b.content});state.groups =  new DataSet(temp);}
}// 渲染时间轴timeline = new Timeline(container, items, groups, options);
const renderTimeLine = async () => {// 清空数据集// dataList.clear();dataList = new DataSet([]);// 获取当天已经排班的数据await getScheduledData();// 设置setItemsstate.timeline.setItems(dataList);// 更新配置选项state.timeline.setOptions({min: moment(curOperateTime.value + ' 7:00:00').format('YYYY-MM-DD HH:mm:ss'), // 设置时间轴可见范围的最小日期max: moment(curOperateTime.value).endOf('day').format('YYYY-MM-DD HH:mm:ss'), // 设置时间轴可见范围的最大日期groupTemplate: (groupData:any, element:any) => {element.className = 'custom-group-template-class'; // 将自定义class写在className属性中return `<div class="group" title="${groupData.description}"><span class="group-id">${groupData.content}</span><span class="group-name">${groupData.administrativeOfficeName}</span></div>`;},});// 跳转到当前时间轴state.timeline.moveTo(curOperateTime.value);// 设置分组state.timeline.setGroups(state.groups);// 打印当前数据dataList.forEach((element: any) => {console.log('---------dataList: ', element);});
}</script><style scoped lang="scss">
.bindNurseToRoom-container {width: 100%;position: relative;
}// vis-timeline样式
:deep(#timeline){.vis-top{background-color: #90e0db9c;.vis-even,.vis-odd{border-left: 1px solid;}}// (此项目必须设置)自定义group分组样式.custom-group-template-class{height: 160px;width: 80px;display: flex;flex-direction: column;align-items: center;justify-content: center;.group{display: flex;flex-direction: column;justify-content: center;align-items: center;.group-id{font-size: 22px;}.group-name{font-size: 14px;margin-top: 10px;}}}// (此项必须设置)自定义item样式.custom-item-template-class{// color: #fff;.custom-item {.top{font-size: 18px;font-weight: bold;color: #5E8DFF;border-bottom: 1px dashed #C4C4C4;}.center-box{padding: 5px;}.nurse-box{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;span{width: 40%;height: 30px;padding: 5px;border: 1px dashed #5E8DFF;border-radius: 5px;text-align: center;}}.bottom-box{padding: 5px;}}// 未提交状态的样式.un-submit{border: 2px solid #698df0;padding: 5px;}.ed-submit{border: 2px solid #efb03f;padding: 5px;}}// 使用自定义class实现不同手术状态.vis-item.icu {color: white;background-color: rgb(228, 210, 93);border-color: darkred;height: 100px;}
}// groups样式
:deep(.group-icu){background-color: rgba(244, 176, 59, 0.2);
}
</style><!-- 
为啥我的template中的自定义的class并没有被渲染到元素中？
你的自定义class选择器写错了：如果在template中自定义了class，但是并没有在CSS样式表中定义，那么这个class将不会生效。
请检查你的CSS样式表中是否已经定义了相应的类选择器，或者将class直接写在style属性中。vis-timeline对class属性进行了过滤：vis-timeline默认会对content和className等属性进行过滤，以避免XSS攻击。
如果你的class名称被视为可疑字符，那么它将被自动过滤掉。你可以通过在options选项中增加content属性的设置，来打开这个过滤功能：vis-timeline缓存了渲染数据，导致更新不及时：有时候，即使你已经在代码中正确设置了class属性，但是图表仍然没有反应出来。
这可能是因为vis-timeline缓存了渲染数据，需要手动调用timeline.redraw()方法来更新图表。
你可以在修改了item对象的class之后，手动调用timeline.redraw()方法，以更新图表。
-->

4、疑难问题集合

1. 中文zh-cn本地化

import moment from 'moment';
// 需要引入下方这个文件
import  "moment/dist/locale/zh-cn.js";

网上说的在配置项options中引入locale: moment.locale('zh-cn')无法实现本地化

2. 关于自定义class样式无法被渲染

写了自定义样式后，发现没有在元素中渲染出对应的class，原因有两点：

• vis-time本身为了防止xss攻击，自动过滤了你写的样式类。需要在options中配置打开xss: {disabled:true,},
• 你写的样式类需要通过:v-deep()渲染到界面，不写对应的样式，只写class类名是无法渲染class名字的

3. 关于双向数据绑定

需要使用let dataList = new DataSet([ ]);

官网真的写的挺详细的，不得不说国外这种开源网站确实非常给力。
有啥疑问可以一起交流哦