如图:对头部实现国际化 如果是英文版本则切换成英文 如果是中文版本则切换成中文
1.需引入
<script src="${pageContext.request.contextPath}/js/moment-with-locales.js"></script> <script src="js/vis.js"></script> <link href="css/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />2.
var optionsUS = { groupOrder: function (a, b) { return a.value - b.value; }, //添加进度条 visibleFrameTemplate: function(item) { if (item.visibleFrameTemplate) { return item.visibleFrameTemplate; } var percentage = item.value+ '%'; return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>'; }, groupOrderSwap: function (a, b, groups) { var v = a.value; a.value = b.value; b.value = v; }, locale: moment.locale('en'), orientation: 'both', editable: false, tooltipOnItemUpdateTime: true, groupEditable: true, start: startTime, end:endTime }; //中文 var options = { groupOrder: function (a, b) { return a.value - b.value; }, //添加进度条 visibleFrameTemplate: function(item) { if (item.visibleFrameTemplate) { return item.visibleFrameTemplate; } var percentage = item.value+ '%'; return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>'; }, groupOrderSwap: function (a, b, groups) { var v = a.value; a.value = b.value; b.value = v; }, orientation: 'both', locale: moment.locale('zh-cn'), editable: false, tooltipOnItemUpdateTime: true, groupEditable: true, start: startTime, end:endTime };3.根据中英文判断
var timeline = new vis.Timeline(container); var lanageType=sessionStorage.getItem("sysManager_i18nLanauge");//获取国际化语言 if(lanageType=="zh"){ timeline.setOptions(options);//调用中文的options配置 }else{ timeline.setOptions(optionsUS);//调用英文的options配置 } timeline.setGroups(groups); timeline.setItems(items);
效果:中文版本
英文版本: